How to Integrate Video.js Player with a Multi-DRM Service?
With the growth of video streaming over the internet, especially on over-the-top (OTT) platforms, like Netflix and Amazon Prime, the developer community has felt the need to standardize protocols needed in content delivery from the server to the client device. One such protocol is the extensive use of HTML5 standards for video delivery as well. HTML5 video players have become the norm now and are either pre-integrated into web browsers or are easily available for download.
Another fundamental requirement for smooth delivery of video content across devices and operating systems is the adoption of HLS and DASH streaming protocols. They form the basis of adaptive streaming and anti-piracy security through application of multi-DRM technology to video assets.
Video.js is an HTML5 video player that meets all these needs of video-streaming platforms. This open-source video player is one of the most popular web players that can play most modern video formats and is highly adaptable for design and functionalities through a global community of developers.
It is a common practice for content producers and OTT companies to apply multi-DRM licensing regimes offered by the three Internet giants Google, Microsoft, and Apple through Widevine, PlayReady, and FairPlay respectively—for managing user rights and content encryption. The integration of the Video.js player with a multi-DRM service, thus, becomes important for the smooth delivery of video content across devices and browsers.
This integration takes place through the VideoJS Contrib EME plugin, which supports Encrypted Media Extensions specifications and allows the Video.js players to communicate with the content decryption module (CDM) of web browsers. The plugin lets the user pass the DRM license URI before the CDM begins to decrypt the video chunk. The developer also has the option of specifying peculiar methods specific to a source and its key system and codec combination.
The integration process requires the developer to specify code for each DRM regime separately.
- Ways to configure Video.js player with FairPlay:
- Get Certificate/License by URL
In this method, the keySystems object requires certificateUri and licenseUri properties and optional properties like certificateHeaders and licenseHeaders. The videojs-contrib-eme makes a GET request to certificateUri to fetch the certificate, the contentID is obtained from the initData. And, the license is fetched through a POST request to the licenseUri. It has a default header of Content-type: application/octet-stream.
- Get Certificate/Content ID/License by Functions
This method is preferred by leading multi-DRM vendors, like PallyCon where the Video.js player fetches license through getCertificate(), getContentId(), and getLicense() methods instead of properties. It allows asynchronous retrieval of certificate, content ID, and license
- Get Certificate/License by URL
- Ways to configure Video.js player with PlayReady:
The plugin operates through three methods of keySystems objects. The developer can choose any of these three methods.
1- If the keySystems value is set to true, the plugin makes a POST request to the destinationURI passed through the browser, whose message will contain the header and body components.
2 – In the second option, the developer can get the key by URL where a POST request is made to the URL along with the headers and body in the message. The licenseHeaders object can be used as well.
3 – The third option is to use the getKey function which uses message buffer and destinationURI. The callback in turn returns the license key
- Ways to configure Video.js player with Widevine:
Google’s Widevine follows the EME specifications for integration. For this DRM, one can make a URL as a property of the keySystems object and add widevineToken in the licenseHeaders object. Also, just as the FairPlay configuration, the getCertificate() function can be used to retrieve a certificate, if needed.
The VideoJS Contrib EME plugin is capable of defining the whole gamut of options of the MediaKeySystemConfiguration object, like videoCapabilities and audioCapabilities functions and within them the contentType and robustness functions.
To integrate an HTML5 player with PallyCon multi-DRM service, the client needs to set the Custom Data or Token for PallyCon license issuance in the Custom HTTP Header through the DRM-related API provided by the player. PallyCon shares DRM integration sample code for Video.js as well as various other HTML5 players on its website.