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:
-
Create an element on your HTML page by adding the following line within the HTML body:
<div id="my-player"></div> -
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> -
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-xxxxxxxxxxxxwith 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'
}; -
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); -
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; -
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;
}
}
}; -
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];
}
}
}; -
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
}; -
In the case of fairplay, you will need to add the configurations as below.
fairplay: {
LA_URL: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
certificateURL: 'https://vtb.axinom.com/FPScert/fairplay.cer',
headers: {
'X-AxDRM-Message':'token',
},
prepareContentId: (uri) => {
return uri.substring(uri.indexOf("skd"));
},
prepareLicenseAsync: ckc => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('loadend', () => resolve(new Uint8Array(reader.result)));
reader.addEventListener('error', () => reject(reader.error));
reader.readAsArrayBuffer(ckc);
});
},
prepareMessage: event => new Blob([event.message], {type: 'application/octet-binary'}),
useUint16InitData: true,
licenseResponseType: 'blob'
}; -
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);
- 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: 'dash source url',
hls: 'hls source url',
drm: {
widevine: {
LA_URL: 'https://drm-widevine-licensing.axprod.net/AcquireLicense',
headers: {
'X-AxDRM-Message':
'X-AxDRM-Message token',
},
},
fairplay: {
LA_URL: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
certificateURL: 'https://vtb.axinom.com/FPScert/fairplay.cer',
headers: {
'X-AxDRM-Message':
'X-AxDRM-Message token',
},
prepareContentId: (uri) => {
return uri.substring(uri.indexOf("skd"));
},
prepareLicenseAsync: ckc => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('loadend', () => resolve(new Uint8Array(reader.result)));
reader.addEventListener('error', () => reject(reader.error));
reader.readAsArrayBuffer(ckc);
});
},
prepareMessage: event => new Blob([event.message], {type: 'application/octet-binary'}),useUint16InitData: true,
licenseResponseType: 'blob'
},
},
}
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.