Skip to main content

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. The dash.js player supports playback of the conent encrypted with Widevine DRM ,Playready DRM and clear key encryption.

The general concept for Axinom DRM integration for DRM-compatible players, is outlined in the video Players document.

Integration​

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>

Testing the Playback​

You can actually try out the dash.js player from the DRM Video Playback Tool and check whether your video plays with it. This tool allows you to play the DRM-protected video as well as generate and adjust the Entitlement Message. Copy the video URL, create the JWT and choose dash.js player from the drop-down menu at the bottom. Click to get the player link and you can see whether your video plays with dash.js player.

You can find the tool here:

DRM Video Playback Tool

See also​