Setting up a simple dash.js player for multi-DRM playback

Setting up a simple dash.js player for multi-DRM playback

What you will learn in this post is how to set up the free DASH player “dash.js” on a web site and make it play multi-DRM protected on-demand DASH videos both on Chrome and Internet Explorer (version 11 on at least Windows 8.1) using the respective native DRM engine – Widevine on Chrome and PlayReady on IE. Since Firefox does not have a Content Decryption Module embedded, playback of protected content on Firefox is not supported.

This guide assumes you have only a simple development web server running which you can use to serve web sites. We are starting from the complete beginning and for the sake of simplicity, we are not even using any Bootstrap-like CSS/layout framework – only jQuery.

Setting up a blank web site

Download the “Classic H5BP” web site starter project from http://www.initializr.com/, unpack the downloaded zip and serve it with your HTTP server.

Integrating dash.js

The player is open source, hosted at Github: https://github.com/Dash-Industry-Forum/dash.js

Download the latest released version of the project and unpack it. The only file that is needed for this tutorial is the dash.debug.js from the dist folder. Copy it to the “js” folder in your web site project.

Open index.html and remove the paragraph that says: “Hello world! This is HTML5 Boilerplate.”

Also add the following line just above the line that loads plugins.js:


<script src="js/dash.debug.js"></script>
2015-03-31-18_47_37-c__inetpub_wwwroot_dashjs-blog_index-html-notepad1

Now that the player code is included we can make use of that player. Let’s first add the player component on the page by replacing the line that says “Hello world! This is HTML5 Boilerplate.” with this:


<video id="videoPlayer" controls="controls" width="300" height="150"></video>

Now the video player exists on the page but it is not playing anything, not to mention a protected video. We can make it play something immediately but let’s make it play a specific clear video only when a button is pressed. We will get to playing protected videos soon. So, the next step is to add a play button. Add the following line just above the <video> element:


<button id="playButton" type="button">Play</button>

To make this button to actually respond to clicking and make the player play a video, we need to write some JavaScript. Let’s create a new file to not pollute the HTML file with logic.

Create a file main.js into the “js” folder with the following content:

 


$(function() {
    var context = new Dash.di.DashContext();
    var player = new MediaPlayer(context);
    player.startup();
    player.attachView(document.querySelector('#videoPlayer'));

    $('#playButton').click(function() {
        var videoUrl = 'http://level3-cdn.axprod.net/demo/manifestprot.ism/.mpd';
        player.attachSource(videoUrl);
    });
});

It is not needed to add a reference to main.js because it is already referenced by default by the Initializr boilerplate code.

The video specified as the value of videoUrl variable is multi-DRM protected (having PlayReady and Widevine signaling), provided by Axinom as a sample video. Since the player supports PlayReady out-of-the-box, you can try to play on Internet Explorer 11 on at Windows 8.1. At the start of playback, the player requests a license from a PlayReady license server the URL of which is embedded in the video container metadata.

Making the video play on Chrome

However, one more step is needed to enable protected video playback on Google Chrome. Chrome needs to know a Widevine license server URL and this does not exist in the metadata. To make the video playable on Chrome, you have to specifically set the Widevine license server URL for the player so that it would know where to make the license request. You can set the URL using the attatchProtectionData function call on the player object:

 


var AXINOM_DEMO_WV_LS = "http://axpr-wv-fe.cloudapp.net:8080/LicensingService";
player.attachProtectionData({"com.widevine.alpha": new MediaPlayer.vo.protection.ProtectionData(AXINOM_DEMO_WV_LS)});

This code uses the a sample Widevine license server provided by Axinom which can give licenses protected with a specific Key ID, encryption key and content_id. I will show you how to create such a protected video yourself in a future blog post.

Here is the full content of main.js for your reference:

 


$(function() {
    var AXINOM_DEMO_WV_LS = "http://axpr-wv-fe.cloudapp.net:8080/LicensingService";

    var context = new Dash.di.DashContext();
    var player = new MediaPlayer(context);
    player.startup();
    player.attachView(document.querySelector('#videoPlayer'));
    player.attachProtectionData({"com.widevine.alpha": new MediaPlayer.vo.protection.ProtectionData(AXINOM_DEMO_WV_LS)});

    $('#playButton').click(function() {
        var videoUrl = 'http://level3-cdn.axprod.net/demo/manifestprot.ism/.mpd';
        player.attachSource(videoUrl);
    });
});

Now the video should be playable also on Chrome looking like this:

 

playback

Troubleshooting

Video is playing in IE but not in Chrome

1. Encrypted Media Extensions may not be enabled in Chrome. On most cases, Chrome has EME enabled by default but there have been occasions when it is not. To fix, go to chrome://flags and look for the following row:

 

chromeflags

If it is disabled for you, enable it and restart Chrome. If it does not help, look for a Chrome icon in your system tray. If it is there, right click on it and choose “Exit” and start Chrome again.

2. You may be using a broken version of Chrome. There is a workaround to still be able to view the video is to modify dash.js source code. Basically, you have to force the player to use ProtectionModel_01b. If you use a released dash.js 1.3.0, open the file js/dash.debug.js and insert the following line after row 1513 (in the mapProtectionModel function):

 


this.system.mapClass("protectionModel", MediaPlayer.models.ProtectionModel_01b);

The fix may be different for other versions of dash.js.