How to Use Drm on HTML5 Video

Is there a way to use DRM on HTML5 video?

On the W3C FAQ on HTML5 it states:

Is there support for digital rights management (DRM) in HTML5 video?
HTML5 doesn't provide direct support, nor any barrier, to using DRM in video. It currently expects this to be handled by the particular codec/implementation. There are implementations which allow for DRM in HTML5 video.
Is dealing with DRM in scope for HTML5?
If enough stakeholders want to standardise some aspect of handling DRM in HTML5 itself as part of the inclusion of video and audio media, then it makes sense for W3C to help standardise an approach which meets the needs of the market. However like all W3C work, relevant stakeholders need to be and show they are committed to developing it rather than expecting it to happen on its own.

Which means it's currently not supported, but there has been a discussion about it on the W3C bug tracker here.

Update:
People interested in this subject might want to consult the working draft of the new encrypted media extension standard.

Updated: EME is currently supported in major browsers.

Is DRM supported in HTML5 audio/video?

No, it doesn't.

At least, not yet. But given the trouble we're having getting browser manufacturers to even agree on a standard format I can only imagine how hard it would be to get them all to support a standard DRM (or even to support it at all!)

DRM protection for Video

No, it's not possible, at least not without writing your own decryption algorithm and decryption key within the script. But if you do that, end users will obtain all they need to decrypt the content anyway. DRM is futile at best, and actively harmful to end users at worst. Don't even attempt to use it.

How to detect whether a HTML video is DRM-protected with javascript in Chrome?

You can simply look at the HTMLMediaElement's mediaKeys property, if it is set, the video is DRM protected:

const isDRMProtected = (elem) => elem.mediaKeys instanceof MediaKeys;

Streaming encrypted copyright content (audio/video) with HTML5

Yes - you can playback encrypted content with certain browsers just using HTML5.

Let's look at the entire workflow.

On the server side: you have to encrypt your content and provide a license server.

for example:

Microsoft PlayReady License Servers or
Media Source Extensions

On the client side: you need a browser that supports encrypted media extensions (EME).

Chrome 34+
IE 11+ on Windows 8+
Safari 8+ on Mac OS

Netflix started working on it two years ago: http://techblog.netflix.com/2013/04/html5-video-at-netflix.html
and supports it now on a variety of browsers and platforms.

HTML5 Video DRM - detect HDCP (output protection) then downgrade to SD content?

At the moment the way you describe is the most common approach AFAIK.

The problems you highlight are recognised and are being discussed by some in the W3C standards worlds, specifically in the Encrypted Media Extension discussions (EME), the standard that deals with the interface between a browser and encrypted media:

https://github.com/w3c/encrypted-media/issues/311

Encrypted event equivalent for DRM content in safari and IE browsers

Firstly, it is worth saying that all the latest versions of the main browsers support Encrypted Media Extensions (EME) for playing back encrypted streamed video now. If you are using one of the common 3rd party Javascript players, e.g. BitMovin or JWPlayer, then playback of encrypted content across browsers should 'just work'.

EME is an extension mechanism that allows the browser build on the HTML5 video capability to detect encrypted content, request the key and using the key decrypt and playback securely the encrypted content.

EME itself is an API that defines the interacting between the application, browser, media player and CDM (Content Decryption Model). Its is specified by W3.org and the following diagram form the latest spec gives a good feel for the flow:

Sample Image

You can see that the browser detects that the media is encrypted when it receives it from the CDN (not CDM...). The browser will create an 'encrypted' event and send it back to your application (or to whatever has registered to listen to video events).

There are two ways, AFAIAW, to see the encryption event - you can register a listener like this (see this example - https://www.html5rocks.com/en/tutorials/eme/basics/ ):

var video = document.querySelector('video');
video.addEventListener('encrypted', handleEncrypted, false);

Or you can include it as an attribute (see the example in the EME spec linked above):

<video autoplay onencrypted='handleInitData(event)'></video>

However, as you say the event is not supported across all browsers at the moment - the latest support is here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/onencrypted#Browser_compatibility

One thing you can do while this support is not there is to look at the video metadata itself to identify whether the video is encrypted.

For an MPEG DASH fragmented MP4 video, the information will be in one or both of the following places:

in the manifest file (the mpd file).
in a header in the mp4 stream itself - the PSSH 'atom' or box.

Most DASH protected files will have the information in the manifest and it should be easy to check - it will look like this:

</AdaptationSet>
        <AdaptationSet segmentAlignment="true" group="1" maxWidth="852" maxHeight="480" maxFrameRate="24" par="16:9" lang="und">
            <ContentProtection schemeIdUri="urn:mpeg:dash:mp4protection:2011" value="cenc" cenc:default_KID="80399bf5-8a21-4014-8053-e27e748e98c0" />
            <ContentProtection value="ClearKey1.0" schemeIdUri="urn:uuid:e2719d58-a985-b3c9-781a-b030af78d30e">
                <clearkey:Laurl Lic_type="EME-1.0">https://drm-clearkey-testvectors.axtest.net/AcquireLicense</clearkey:Laurl>
            </ContentProtection>

This example uses clearKey, but the important bit from your point of view is the existence of the 'ContentProtection' attribute in the manifest.

Similarly, if your video is being streamed with HLS, the m3u8 playlist, which is the HLS equivalent of the manifest, will have an indicator that the media is encrypted which you can check. This is the 'EXT-X-KEY' flag:

#EXT-X-KEY:METHOD=AES-128,URI="http://AKeyServer/sceret.key"

The way the video players stream the video is using the HTML5 Media Source Extensions mechanism (https://www.w3.org/TR/media-source/). This allows you set the source of a video to be a local object rather than a video URL. The players are able to look at the manifest to get the URL for the video stream they want to play and then download that video chunk by chunking, appending it to this local 'src' object as they go. The browser video player takes the video from this object as if it were a regular video file source.

There is a very widely shared example here which helps demonstrate the approach: https://developers.google.com/web/updates/2011/11/Stream-video-using-the-MediaSource-API

So the Javascript players actually only need to be told the Url for the manifest file itself - each will have different ways to get this, but you can see how Shakaplayer does it by looking at the source on Github (https://github.com/google/shaka-player) and search for the term 'manifestInput' (correct at the time of writing) - from here you can trace how Shakaplayer accepts this input, parses the manifest file and then plays the video streams.