CODEWITHSUNDEEP
javascriptvideomedia-playerdash.js
Morgoth
Morgoth

Reputation: 455

Dash.js issue with Multi-drm content

I'm trying to play multi-drm content (Widewine, Playready) by using dash.js player (version 2.3.0). I gathered as much information as possible, however I'm still not able to play the content. Dash.js player was modified recently and many code examples found on the internet are no longer valid, also the documentation is not updated. This is my current code:

HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <script src="dash.all.debug.js"></script>
   <link rel="stylesheet" type="text/css" href="css/style.css" />
   <title>Dash Example App</title>
</head>

<body onload="testVideo()">
   <button id="playButton" type="button">Play</button>
   <div>
      <video id="vid2" data-dashjs-player controls>
      </video>
   </div>
<script src="main.js"></script>
</body>
</html>

JS:

function testVideo() {
   var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
   var AXINOM_DEMO_header = "X-AxDRM-Message";
   var AXINOM_DEMO_key = "here is the key";
   var player = new dashjs.MediaPlayer().create();
   var element = document.querySelector("#vid2");
   player.attachProtectionData({
     "com.widevine.alpha": new dashjs.MediaPlayer.vo.protection.ProtectionData(AXINOM_DEMO_WV_LS, AXINOM_DEMO_header, AXINOM_DEMO_key)
   });
   document.getElementById("playButton").click(function() {
     var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
     player.initialize(element, videoUrl, true);
   });
};

As a result, I'm getting "Uncaught TypeError: Cannot read property 'protection' of undefined" in the console. I've prepared the protectionData part according to the documentation linked below.

http://vm2.dashif.org/dash.js/docs/jsdocs/MediaPlayer.vo.protection.ProtectionData.html

Is anyone able to provide me with a working example how multi-drm content should be handled in dash.js or explain what should I change in my code?

Thanks in advance.

Upvotes: 1

Views: 2549

Answers (3)

Tuhin Kanti Pal
Tuhin Kanti Pal

Reputation: 63

Updated JS

function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.setProtectionData({
    "com.widevine.alpha": {
        "serverURL": AXINOM_DEMO_WV_LS,
        "httpRequestHeaders": {
            "X-AxDRM-Message": AXINOM_DEMO_key
        };
    };
});
document.getElementById("playButton").click(function() {
    var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
    player.initialize(element, videoUrl, true);
 });
};

Upvotes: 0

Anonymous Coward
Anonymous Coward

Reputation: 1273

The documentation you linked to is for version 1.5.1.

The documentation for v2.3.0 can be found at http://cdn.dashjs.org/v2.3.0/jsdoc/index.html

Upvotes: 0

Sander
Sander

Reputation: 26374

There is a DRM quick start example on GitHub that uses this exact content with the Axinom DRM license server, mirroring your scenario quite perfectly.

You can also find a live deployment of the example project that you can view in your browser, to quickly see the user viewpoint.

If something remains unclear after reading that guide, please edit your question and I will edit this answer to expand on the missing parts in detail!

Upvotes: 2

Related Questions