Dash.js
Integrating dash.js with Axinom DRM
It is easy to integrate dash.js with Axinom DRM. Use the sample below to do this.
-
Create a video element on your HTML Page by adding the following line:
<video id="videoPlayer" controls></video>
-
Add
dash.all.min.js
to the end of the HTML body.<body> ... <script src="yourPathToDash/dash.all.min.js"></script> </body>
-
Initialize the Player by adding the following line inside your loader method which is executed when you load the player.
player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector('#videoPlayer'));
-
In the
ProtectionData
, specify the license service URL (You can find the URL valid for your tenant from My Mosaic area) and theX-AxDRM-Message
as the token. See an example of theProtectionData
object below:const protectionData = { 'com.widevine.alpha': { serverURL: 'https://drm-widevine-licensing.axprod.net/AcquireLicense', httpRequestHeaders: { 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjogMSwiY29tX2tleV9pZCI6ICJmY2U3ZmQxYS1hMjY2LTQ4NGEtYmUyZS1iMDUzMDA1OTkzNGIiLCJtZXNzYWdlIjogeyAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsICAidmVyc2lvbiI6IDIsICAiY29udGVudF9rZXlzX3NvdXJjZSI6IHsgICAgImlubGluZSI6IFsgICAgICB7ICAgICAgICAiaWQiOiAiMjQyZjY4NmUtOWZmYi00OThlLTkwMGEtMWFlM2RmMzMxYTRlIiAgICAgIH0gICAgXSAgfX19.FTaSCf-tQKidJmN2hd4svlgApaMk-JKFbk0kzYX-iuE', }, }, }
-
Set the protection data related to the video with the license service details and the token.
player.setProtectionData(ProtectionData);
-
Finally, you can open the player, which is now integrated with DRM.
player.attachSource(url); player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, streamInitialized.bind(this)); $('#dash-player').show();
-
Example code
<!DOCTYPE html> <html> <head> <title>Dash Player with Axinom DRM</title> <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script> </head> <body> <video id="videoPlayer" controls></video> <div id="dash-player"></div> <script> const player = dashjs.MediaPlayer().create() player.initialize(document.querySelector('#videoPlayer')) const protData = { 'com.widevine.alpha': { serverURL: 'https://drm-widevine-licensing.axprod.net/AcquireLicense', httpRequestHeaders: { 'X-AxDRM-Message': 'X-AxDRM-Message token', }, }, } player.setProtectionData(protData) const url = 'url' player.attachSource(url) player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, streamInitialized.bind(this)) document.querySelector('#dash-player').style.display = 'block' </script> </body> </html>
Tip
|
You can try out the dash.js player with the HTML5 VideoTestBench online tool. |
Revision History
The table below outlines the document versions and any changes between them.
Version | Date | Description |
---|---|---|
1.0 |
April 8, 2021 |
|
1.1 |
April 13, 2021 |
|
1.2 |
May 6, 2021 |
|