HTML5 Player Integration Guide

Overview

This document explains how to play streaming content (DASH or HLS) protected with multi-DRM (PlayReady, Widevine, FairPlay Streaming) using the HTML5 player from the web page of the service site.

1. MPEG-DASH CENC content

• DASH streaming content protected by PlayReady and Widevine DRM encrypted under the Common Encryption standard. Depending on your browser, PlayReady (IE11, Edge) or Widevine (Chrome, FireFox) DRM is applied.

2. HLS FPS(FairPlay Streaming) content

• HTTP Live Streaming content encrypted with Sample AES and protected by FairPlay Streaming. Applies to Safari browsers running on Mac OS X (10.10 or later).

In order to issue multi-DRM licenses in HTML5 player, user authentication must be performed through the integration with PallyCon cloud and customer service site. Please check Multi-DRM Native Integration for license issuance integration.

Sample codes

We share DRM integration sample code for various HTML5 players through Github service. Demo content and integration data are included in the sample code, so you can check the playback of DRM content without any modification other than the license key of the commercial player.

Basic integration method

To integrate HTML5 Player with PallyCon Multi DRM service, you need 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.

Widevine / PlayReady settings

Widevine and PlayReady DRM can be configured by setting the license request URL and custom HTTP header as follows. When running in a browser that supports MPEG-DASH CENC, each corresponding DRM setting will be applied to play DASH content.

FairPlay Streaming settings

For FairPlay Streaming integration, additional APIs are used in addition to the license request address and Custom HTTP Header information. To set the CERT file for the FPS deployment package that is issued by Apple, set the certificateURL value and use the prepareContentId and prepareCertificate APIs as described in the code below.

It is possible to integrate players that are not mentioned in this document as long as the player supports EME(Encrypted Media Extension) standard. Please refer to the input value description and sample code to integrate it on your own, or contact for tech support via Helpdesk.

Input Value Description

Please refer to the description below for the input values ​​used in each player-specific API code.

Shaka Player Integration

Shaka player is an HTML5 player that supports HLS and MPEG-DASH. It supports CENC content playback via Widevine and PlayReady, and HLS content via FairPlay. For more information about Shaka player, please see the links below.

• Shaka Player Github : https://github.com/google/shaka-player

• Shaka Player Online Guide : https://shaka-player-demo.appspot.com/docs/api/index.html

• Shaka Player DRM Setup Guide : https://shaka-player-demo.appspot.com/docs/api/tutorial-drm-config.html

Please refer to the sample code to configure Shaka player’s API settings for each type of DRM.

Handling Error Response

If the PallyCon cloud encounters an error while processing license request, you can get the error code and message in the player. Shaka player provides registerResponseFilter API for error handling.

Example

player.getNetworkingEngine().registerResponseFilter(function(type, response) {
  // Alias some utilities provided by the library.
  if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    console.log(response.data.byteLength);
    var responseText = arrayBufferToString(response.data);
    console.log("response : " + responseText);
    if (responseText.indexOf('errorCode') > 0) {
      // this alert should be properly parsed and displayed for commercial use
      var errorCode = JSON.parse(responseText).errorCode;
      if("8002" != errorCode){
        alert("PallyCon Error : " + JSON.parse(responseText).message + "(" + JSON.parse(responseText).errorCode+ ")");
      }else{
        var message = JSON.parse(responseText).message;
        alert("Error : " + JSON.parse(message).MESSAGE + "(" + JSON.parse(message).ERROR + ")");
      }
    }
  }
});

registerResponseFilter is applied to both Widevine and PlayReady. When applying to your service site, please use the above example code as reference to deal with errors in a way that is appropriate for the service.

For the list of error codes and corresponding message contents, please refer to the License Error Code page.

Bitmovin Player Integration

Bitmovin player is an HTML5 player that supports HLS and MPEG-DASH. For more information on the Bitmovin player, please refer to the links below.

• Bitmovin Homepage : https://bitmovin.com/html5-player/

• Bitmovin Player Online Guide : https://bitmovin.com/docs/player

• Bitmovin Player DRM Setup Guide : https://bitmovin.com/docs/player/tutorials/setup-the-bitmovin-player-with-multiple-drm-solutions

Please refer to the sample code to configure Bitmovin player’s JSON API settings for each type of DRM.

Handling Error Response

If the PallyCon cloud encounters an error while processing license request, you can get the error code and message in the player. Bitmovin player provides prepareLicense API for error handling.

Example (Widevine)

var conf = {
  ...
  source: {
    dash: 'https://d28giv01x4pn7o.cloudfront.net/tears_of_steel_720p/stream.mpd',
    drm: {
      widevine: {
        LA_URL: 'https://license-global.pallycon.com/ri/licenseManager.do',
        headers: {
          'pallycon-customdata-v2' : 'eyJkYXRhIjoibWJLV1NjSUNIU25WMjZQWFB4cGlDSmNsOHdJMHV1Qlc1cnFqU0hzV1BRSTM4ek1iZTcyZ3Q5TllZRXprRmFjUU5hVU8yRGZUb2l0YzZndXZ5RzJOWlE9PSIsInNpdGVfaWQiOiJERU1PIiwiZHJtX3R5cGUiOiJXaWRldmluZSJ9'
        },
        prepareLicense: function(licenseObj) {
          var license = {
            license: licenseObj.license
          };
          try {
            var pallyconObj = JSON.parse(String.fromCharCode.apply(null, licenseObj.license));
            if (pallyconObj && pallyconObj.errorCode && pallyconObj.message) {
              // this response is error, not valid widevine license
              console.log('ri error code : ' + pallyconObj.errorCode + ', message :', pallyconObj.message);

              var fullErrorMsg;
              if (parseInt(pallyconObj.errorCode) == 8002) {
                // getting the error from callback page
                var errorObj = JSON.parse(pallyconObj.message);
                if (errorObj && errorObj.ERROR && errorObj.MESSAGE) {
                  fullErrorMsg = 'RI errorCode : ' + pallyconObj.errorCode + '\nCallback ERROR: ' + errorObj.ERROR + '\nCallback MESSAGE: ' + errorObj.MESSAGE;
                }
              } else {
                // this error is from PallyCon RI
                fullErrorMsg = 'RI errorCode: ' + pallyconObj.errorCode + '\nRI message: ' + pallyconObj.message;
              }
              alert(fullErrorMsg);
            } 
          } catch (e) {
            // this is valid license
            return license;
          }  
      },
      ...
    }
  }
};

The above example shows the processing for the Widevine license response, and if necessary, apply the same process for the prepareLicense API of the PlayReady and FairPlay Streaming as well. When applying to your service site, please use the above example code as reference to deal with errors in a way that is appropriate for the service.

For the list of error codes and corresponding message contents, please refer to the License error code.

THEOplayer Integration

THEOplayer is a cross-platform video player that supports HLS and MPEG-DASH playback in web, mobile apps, and smart TV environments. DASH CENC content protection via Widevine and PlayReady and HLS content protection through FairPlay Streaming. For more information about THEOplayer, please see the links below.

• THEOplayer Homepage : https://theoplayer.com/

• THEOplayer Developer Site : https://support.theoplayer.com/hc/en-us

• THEOplayer DRM API : https://docs.theoplayer.com/how-to-guides/04-drm/15-pallycon.md

Please refer to the sample code to configure THEOplayer’s API settings for each type of DRM.

Handling Error Response

If the PallyCon cloud encounters an error while processing license request, you can get the error code and message in the player. THEOplayer provides ‘contentprotectionerror’ Event Listener API for error handling.

Example

player.addEventListener("contentprotectionerror", function(data){
    console.log( "error : " + data.error);
    console.log( "licenseAcquisitionMessage : " + data.licenseAcquisitionMessage );
    console.log( "licenseAcquisitionURL : " + data.licenseAcquisitionURL );
    console.log( "mediaTrackType : " + data.mediaTrackType );
    console.log( "status  : " + data.status );
    console.log( "statusText  : " + data.statusText );
    console.log( "type  : " + data.type );
);

Event Listener is applied to both Widevine and PlayReady. When applying to your service site, please use the above example code as reference to deal with errors in a way that is appropriate for the service.

For the list of error codes and corresponding message contents, please refer to the Error code page.

Radiant Media Player Integration

Radiant Media Player (RMP) is a modern go-everywhere HTML5 video player that can create web, mobile & OTT video apps in a snap. For more information on the VideoJS player, please refer to the links below.

• RMP Homepage : https://www.radiantmediaplayer.com/
• RMP Developer Guide : https://www.radiantmediaplayer.com/docs/latest/quick-start.html
• RMP DRM Integration API : https://www.radiantmediaplayer.com/guides/working-with-pallycon.html

Please refer to the sample code to configure Radiant Media Player API settings for each type of DRM.

JW Player Integration

JW Player is an HTML5 player that supports web, mobile and OTT app development. For more information on the JW player, please refer to the links below.

• JW Player Homepage : https://www.jwplayer.com/
• JW Player Developer Guide : https://developer.jwplayer.com/jwplayer/docs
• JW Player DRM Integration API : https://developer.jwplayer.com/jwplayer/docs/jw8-enable-drm-through-the-web-player

Please refer to the sample code to configure JW Player API settings for each type of DRM.

VideoJS Player integration

VideoJS player is an HTML5 player that supports HLS and MPEG-DASH. For more information on the VideoJS player, please refer to the links below.

• VideoJS player homepage : https://videojs.com/
• VideoJS player online guide : https://docs.videojs.com/

You need to use the following plug-in for multi-DRM integration of VideoJS player.

• VideoJS Contrib EME : https://www.npmjs.com/package/videojs-contrib-eme/

Please refer to the sample code to configure VideoJS player’s API settings for each type of DRM.

Viblast Player Integration

Viblast player is an HTML5 player that supports HLS and MPEG-DASH and supports P2P content delivery. It supports CENC content playback via Widevine and PlayReady, but does not yet support FairPlay DRM. For more information about Viblast player, please see the links below.

• Viblast Homepage : https://viblast.com/player/

• Viblast Player Online Guide : https://docs.viblast.com/player/

• Viblast Player DRM Integration : https://docs.viblast.com/player/drm-protection

Please refer to the sample code to configure Viblast player’s API settings for each type of DRM.

Handling Error Response

If the PallyCon cloud encounters an error while processing license request, you can get the error code and message in the player. Viblast player provides ‘load’ Event Listener API for error handling.

Example

var videoCheck = 0;
viblast('#player').setup({
  stream: 'https://d28giv01x4pn7o.cloudfront.net/tears_of_steel_720p/stream.mpd',
  widevine: {
    'licensing-server': 'https://license-global.pallycon.com/ri/licenseManager.do'
  },
  xhrBeforeSend: function(ev) {
    // filter out non-drm requests
    if (ev.method !== "POST") return;

    if (is_chrome_or_firefox) {
      ev.xhr.setRequestHeader('pallycon-customdata-v2', 'eyJkYXRhIjoibWJLV1NjSUNIU25WMjZQWFB4cGlDSmNsOHdJMHV1Qlc1cnFqU0hzV1BRSTM4ek1iZTcyZ3Q5TllZRXprRmFjUU5hVU8yRGZUb2l0YzZndXZ5RzJOWlE9PSIsInNpdGVfaWQiOiJERU1PIiwiZHJtX3R5cGUiOiJXaWRldmluZSJ9');
    }
    else {
      ev.xhr.setRequestHeader('pallycon-customdata-v2', 'eyJkYXRhIjoibWJLV1NjSUNIU25WMjZQWFB4cGlDSmNsOHdJMHV1Qlc1cnFqU0hzV1BRSTM4ek1iZTcyZ3Q5TllZRXprRmFjUU5hVU8yRGZUb2l0YzZndXZ5RzJOWlE9PSIsInNpdGVfaWQiOiJERU1PIiwiZHJtX3R5cGUiOiJQbGF5UmVhZHkifQ==');
    }
    
    ev.xhr.addEventListener('load', function() {
      if( 1 > videoCheck){
        var responseText = String.fromCharCode.apply(null, new Uint8Array(ev.xhr.response)); // assumes utf8
        if (responseText.indexOf('errorCode') > 0) {
          // this alert should be properly parsed and displayed for commercial use
          var errorCode = JSON.parse(responseText).errorCode;
          if("8002" != errorCode){
            alert("PallyCon Error : " + JSON.parse(responseText).message + "(" + JSON.parse(responseText).errorCode+ ")");
            //window.alert('No Rights. Server Response ' + responseText);
          } else {
            var message = JSON.parse(responseText).message;
            alert("Error : " + JSON.parse(message).MESSAGE + "(" + JSON.parse(message).ERROR + ")");
          }
        }
        videoCheck += 1;
      }
    });
  },
  ...
});

Load Event Listener is applied to both Widevine and PlayReady. When applying to your service site, please use the above example code as reference to deal with errors in a way that is appropriate for the service.

For the list of error codes and corresponding message contents, please refer to the Error code page.