With the dash.js framework, you can create many MSE and EME video players that play back content by using client-side JavaScript libraries. Learn how to integrate dash.js with Axinom DRM to protect your videos.

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.

  1. Create a video element on your HTML Page by adding the following line:

        <video id="videoPlayer" controls></video>
  2. Add dash.all.min.js to the end of the HTML body.

        <body>
            ...
            <script src="yourPathToDash/dash.all.min.js"></script>
        </body>
  3. 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'));
  4. 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',
            },
        },
    }
  5. Set the protection data related to the video with the license service details and the token.

        player.setProtectionData(ProtectionData);
  6. 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();
  7. 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

  • Initial version.

1.1

April 13, 2021

  • Player link update.

1.2

May 6, 2021

  • Player integration with DRM - code updated.