The modular HTML5 player from Bitmovin is easy to customize as you only need to configure the parts you need. Learn how to integrate Bitmovin with Axinom DRM to protect your content.

Bitmovin Player

The Bitmovin player is a modular HTML5 player that is easy to customize. Thanks to being modular, you only need to configure the parts that you need. The player plays videos instantly and reduces buffering. The Bitmovin player streams across all major platforms.

Bitmovin player can be integrated with Axinom DRM. You can find the specific instructions below.

Integrating Bitmovin Player with Axinom DRM

It is easy to integrate Bitmovin player with Axinom DRM. Use the sample below to do this. To integrate Bitmovin player:

  1. Create an element on your HTML page by adding the following line within the HTML body:

        <div id="my-player"></div>
  2. Embed the player source file into the HTML file. Add the following script inside the head of the HTML file.

        <head>
            <meta charset="utf-8">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
        </head>
  3. Set the player configurations by adding the following line inside your loader method which is executed when you load the player. Start with a common configuration as seen in the example below. Please replace xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with your player license key, which is shown on the Bitmovin dashboard when you are logged in with your account.

        const playerConfig = {
            key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
        };
  4. Initialize a new instance of the player by adding the following line inside your loader method which is executed when you load the player.

        videoEl = document.getElementById('my-player');
        player = new bitmovin.player.Player(videoEl, playerConfig);
  5. Set the License URL in the format below. For the keySystem, you need to set the related keysystem (possible values: "playready", "widevine", "fairplay").

            var protection = {
                dash: $urlInput.val(),
                drm: {
                    [keySystem]: {
                        LA_URL: {}
                    }
                }
            };
    
    
            protection.drm[keySystem].LA_URL = license;
  6. Pass the License request URL within the player configurations.

            const playerConfig = {
                key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
                network: {
                    preprocessHttpRequest: function (requestType, requestConfig) {
                        requestConfig.url = requestConfig.url;
                    }
                }
            };
  7. If you want to pass the license request token as a query parameter, you need to pass it with the player configurations as below.

            const playerConfig = {
                key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
                network: {
                    preprocessHttpRequest: function (requestType, requestConfig) {
                        requestConfig.url = requestConfig.url + "?AxDrmMessage="+[token];
                    }
                }
            };
  8. If you want to pass the license request token in the header, you need to pass it as a header as below.

            protection.drm[keySystem].LA_URL = license;
            protection.drm[keySystem].headers=  {
                "X-AxDRM-Message": token
            };
  9. Finally, you can open the player, which is now integrated with DRM.

        player.load(protection).then(function () {
                console.log('The video has now been loaded!');
        }).catch(onError);
  10. Example code

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Bitmovin Player with Axinom DRM</title>
    		<head>
    			<meta charset="utf-8" />
    			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    			<script
    				type="text/javascript"
    				src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"
    			></script>
    		</head>
    	</head>
    	<body>
    		<div id="my-player"></div>
    		<script>
    			const playerConfig = {
    				key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    				network: {
    					preprocessHttpRequest: function (requestType, requestConfig) {
    						requestConfig.url = requestConfig.url
    					},
    				},
    			}
    			videoEl = document.getElementById('my-player')
    			player = new bitmovin.player.Player(videoEl, playerConfig)
    
    			// SourceConfig object to be passed to Bitmovin Player instance
    			var source = {
    				dash: 'source url',
    				drm: {
    					widevine: {
    						LA_URL: 'https://drm-widevine-licensing.axprod.net/AcquireLicense',
    						headers: {
    							'X-AxDRM-Message':
    								'X-AxDRM-Message token',
    						},
    					},
    				},
    			}
    			player
    				.load(source)
    				.then(function () {
    					console.log('The video has now been loaded!')
    				})
    				.catch(onError)
    		</script>
    	</body>
    </html>

Bitmovin Player Tool in Portal

Note that under My DRM >> Tools >> DRM Video Playback, you can actually try out the Bitmovin player 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, the JWT, and the license acquisition URL and choose Bitmovin player from the drop-down menu at the bottom. Click Launch Player to see whether your video plays with Bitmovin. The player launches in a new tab.

Revision History

The table below outlines the document versions and any changes between them.

Version Date Description

1.0

July 21, 2021

  • Initial version.

1.1

March 24, 2022

  • Added how to pass the token as a header to the player.