Encrypted media extensions | Frontend Practical Guide

Overview

The mediaKeys property of HTMLMediaElement and the navigator.requestMediaKeySystemAccess() method control the playback of content subject to digital rights management. Also known as EME. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`MediaEncryptedEvent`	42	13	38	12.1	42	12.2
`encrypted_event` The encrypted event is fired when initialization data is found in the media that indicates it is encrypted.	42	13	38	12.1	42	12.2
`mediaKeys` The read-only HTMLMediaElement.mediaKeys property returns a MediaKeys object, that is a set of keys that the element can use for decryption of media data during playback.	42	13	38	12.1	42	12.2
`setMediaKeys` The setMediaKeys() method of the HTMLMediaElement interface sets the MediaKeys that will be used to decrypt media during playback.	42	13	38	12.1	42	12.2
`waitingforkey_event` The waitingforkey event is fired at a media element when it is first unable to play because it needs a key to decode the following data, and playback is stopped.	55	79	133	12.1	55	12.2
`decodingInfo (configuration keySystemConfiguration parameter)` Object specifying the key system configuration for encrypted media.	80	80	129		80
`initData` The read-only initData property of the MediaKeyMessageEvent returns the initialization data contained in this event, if any.	42	13	38	12.1	42	12.2
`initDataType` The read-only initDataType property of the MediaKeyMessageEvent returns a case-sensitive string describing the type of the initialization data associated with this event.	42	13	38	12.1	42	12.2
`MediaEncryptedEvent` The MediaEncryptedEvent constructor creates a new MediaEncryptedEvent object.	42	13	38	12.1	42	12.2
`MediaKeyMessageEvent` The MediaKeyMessageEvent interface of the Encrypted Media Extensions API contains the content and related data when the content decryption module generates a message for the session.	42	13	38	12.1	42	12.2
`MediaKeyMessageEvent` The MediaKeyMessageEvent constructor creates a new MediaKeyMessageEvent object.	42	13	38	12.1	42	12.2
`message` The MediaKeyMessageEvent.message read-only property returns an ArrayBuffer with a message from the content decryption module. Messages vary by key system.	42	13	38	12.1	42	12.2
`messageType` The MediaKeyMessageEvent.messageType read-only property indicates the type of message. It may be one of license-request, license-renewal, license-release, or individualization-request.	42	13	38	12.1	42	12.2
`MediaKeys` The MediaKeys interface of Encrypted Media Extensions API represents a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.	42	13	38	12.1	42	12.2
`createSession` The createSession() method of the MediaKeys interface returns a new MediaKeySession object, which represents a context for message exchange with a content decryption module (CDM).	42	13	38	12.1	42	12.2
`getStatusForPolicy` The getStatusForPolicy() method of the MediaKeys interface is used to check whether the Content Decryption Module (CDM) would allow the presentation of encrypted media data using the keys, based on the specified policy requirements.	73	79	128		73
`setServerCertificate` The setServerCertificate() method of the MediaKeys interface provides a server certificate to be used to encrypt messages to the license server.	42	13	38	12.1	42	12.2
`MediaKeySession` The MediaKeySession interface of the Encrypted Media Extensions API represents a context for message exchange with a content decryption module (CDM).	42	13	38	12.1	42	12.2
`close` The close() method of the MediaKeySession interface notifies that the current media session is no longer needed, and that the content decryption module should release any resources associated with this object and close it. Then, it returns a Promise.	42	13	38	12.1	42	12.2
`closed` The closed read-only property of the MediaKeySession interface returns a Promise signaling when a MediaKeySession closes. This promise can only be fulfilled and is never rejected. Closing a session means that licenses and keys associated with it are no longer valid for decrypting media data.	42	13	38	12.1	42	12.2
`expiration` The expiration read-only property of the MediaKeySession interface returns the time after which the keys in the current session can no longer be used to decrypt media data, or NaN if no such time exists.	42	13	38	12.1	42	12.2
`generateRequest` The generateRequest() method of the MediaKeySession interface returns a Promise after generating a license request based on initialization data.	42	13	38	12.1	42	12.2
`keyStatuses` The keyStatuses read-only property of the MediaKeySession interface returns a reference to a read-only MediaKeyStatusMap of the current session's keys and their statuses.	42	13	38	12.1	42	12.2
`keystatuseschange_event` The keystatuseschange event of the MediaKeySession API fires when there has been a change in the keys or their statuses within a session.	55	79	52	12.1	55	12.2
`load` The load() method of the MediaKeySession interface returns a Promise that resolves to a boolean value after loading data for a specified session object.	42	13	38	12.1	42	12.2
`message_event` The message event of the MediaKeySession interface fires when a message is generated by the content decryption module.	55	79	52	12.1	55	12.2
`remove` The remove() method of the MediaKeySession interface returns a Promise after removing any session data associated with the current object.	42	13	38	12.1	42	12.2
`sessionId` The sessionId read-only property of the MediaKeySession interface contains a unique string generated by the content decryption module (CDM) for the current media object and its associated keys or licenses.	42	13	38	12.1	42	12.2
`update` The update() method of the MediaKeySession interface loads messages and licenses to the CDM, and then returns a Promise.	42	13	38	12.1	42	12.2
`MediaKeyStatusMap` The MediaKeyStatusMap interface of the Encrypted Media Extensions API is a read-only map of media key statuses by key IDs.	42	13	38	12.1	42	12.2
`@@iterator` [Symbol.iterator]	42	16	45	12.1	42	12.2
`entries` The entries() method of the MediaKeyStatusMap interface returns a new Iterator object, containing an array of \[key, value] pairs for each element in the status map, in insertion order.	42	16	38	12.1	42	12.2
`forEach` The forEach() method of the MediaKeyStatusMap interface calls callback once for each key-value pair in the status map, in insertion order. If an argument is present it will be passed to the callback.	42	13	47	12.1	42	12.2
`get` The get() method of the MediaKeyStatusMap interface returns the status value associated with the given key, or undefined if there is none.	42	13	45	12.1	42	12.2
`has` The has() method of the MediaKeyStatusMap interface returns a Boolean, asserting whether a value has been associated with the given key.	42	13	45	12.1	42	12.2
`keys` The keys() method of the MediaKeyStatusMap interface returns a new Iterator object, containing keys for each element in the status map, in insertion order.	42	16	38	12.1	42	12.2
`size` The size read-only property of the MediaKeyStatusMap interface returns the number of key/value paIrs in the status map.	42	13	38	12.1	42	12.2
`values` The values() method of the MediaKeyStatusMap interface returns a new Iterator object, containing values for each element in the status map, in insertion order.	42	16	38	12.1	42	12.2
`MediaKeySystemAccess` The MediaKeySystemAccess interface of the Encrypted Media Extensions API provides access to a Key System for decryption and/or a content protection provider. You can request an instance of this object using the Navigator.requestMediaKeySystemAccess method.	42	13	38	12.1	42	12.2
`createMediaKeys` The MediaKeySystemAccess.createMediaKeys() method returns a Promise that resolves to a new MediaKeys object.	42	13	38	12.1	42	12.2
`getConfiguration` The getConfiguration() method of the MediaKeySystemAccess interface returns an object with the supported combination of the following configuration options:	42	13	43	12.1	42	12.2
`keySystem` The keySystem read-only property of the MediaKeySystemAccess interface returns a string identifying the key system being used.	42	13	38	12.1	42	12.2
`requestMediaKeySystemAccess` The requestMediaKeySystemAccess() method of the Navigator interface returns a Promise which delivers a MediaKeySystemAccess object that can be used to access a particular media key system, which can in turn be used to create keys for decrypting a media stream.	42	13	38	12.1	42	12.2
Other
`html.elements.iframe.allow.encrypted-media`	64	79	74		64
`http.headers.Permissions-Policy.encrypted-media` Experimental The HTTP Permissions-Policy header encrypted-media directive controls whether the current document is allowed to use the Encrypted Media Extensions API (EME).	88	88			88

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const config = [{
  initDataTypes: ['cenc'],
  videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
}];
const access = await navigator.requestMediaKeySystemAccess('com.widevine.alpha', config);
const keys = await access.createMediaKeys();

Use cases

Use Encrypted media extensions
Use Encrypted media extensions when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Encrypted media extensions to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Encrypted media extensions in your target browsers and input environments before depending on it as a primary behavior.

Overview

Browser support

Syntax

Use cases

Use Encrypted media extensions

Handle edge cases

Cautions

Accessibility

Related links