dash.js

The dash.js framework enables to create many different Media Source Extensions (MSE) and Encrypted Media Extensions (EME) players. These players play back MPEG-DASH content using client-side JavaScript libraries.

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 the X-AxDRM-Message as the token. See an example of the ProtectionData 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.

Integrating dash.js with Axinom DRM​

Integrating dash.js with Axinom DRM