Video.js is a powerful open-source web video player. It supports HTML5 video and most modern streaming formats on both desktop and mobile devices. In this blog post, we cover how to set up DRM with video.js and provide samples of how to set up video.js to retrieve licenses from BuyDRM services.
The video.js project was started in 2010, and now according to official stats, it is used on over 600,000 websites. Due to the hard work of hundreds of contributors Video.js has become a safe player pick for those who seek a free extendable playback tool. And here lies the main advantage of this player – it has plug-ins and add-ons to support everything, including all three main DRMs – Widevine, PlayReady, and FairPlay.
Videojs-http-streaming
Starting with version 7, Video.js developers made DRM integrations much easier, which BuyDRM’s clients much appreciate. Now Video.js includes videojs-http-streaming (https://github.com/videojs/http-streaming) addon by default, allowing playing HLS, DASH, and future HTTP streaming protocols without applying any additional extensions. You simply specify the format of the asset and the player is ready to play.
If you are targeting some older Video.js version, don’t worry – they support modern streaming formats as well, yet player setup will differ. If you are struggling with any particular Video.js setup, just come to BuyDRM, we have samples.
Video.js and DRM
As previously stated, to set up Video.js 7+ which comes with the VHS module inside, you don't need to add additional libraries for MPEG-DASH or HLS support. The only plugin you will need is the EME plugin (https://github.com/videojs/videojs-contrib-eme) to deal with DRM. It enables Encrypted Media Extensions support for playback of encrypted content in Video.js.
BuyDRM Samples
Enough words – let the code speak for us. Here are samples of how you can set up a video.js player to retrieve licenses from BuyDRM services for playing MPEG-DASH with Widevine and PlayReady as well as the HLS with FairPlay.
MPEG-DASH w/ Widevine and PlayReady
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://s3.amazonaws.com/cdn.keyos.com/html5/videojs-contrib-eme/3.5.4/videojs-contrib-eme.min.js"></script>
</head>
<body>
<video id="my-player" class="video-js" controls></video>
<script type="text/javascript">
(function() {
// Init player.
var player = videojs('my-player');
// Init eme plugin to work with DRM. Set header common for all license related requests: https://github.com/videojs/videojs-contrib-eme/tree/v3.5.0#emeheaders
player.eme({
// If you are using proxy, please, remove 'emeHeaders' block. Only 'player.eme();' should stay to register eme plugin.
emeHeaders: {
'customdata': 'your base64 encoded Authentication XML here that contains WV/PR policies.'
}
});
player.on('ready', function() {
// Setup dash + pr/wv
var wvprDashSrc = {
src: 'https://some/asset/stream.mpd',
type: 'application/dash+xml',
keySystems: {
'com.widevine.alpha': [Widevine License Acquisition Server url]',
'com.microsoft.playready': [PlayReady License Acquisition Server url]'
}
};
// Set the source to the player to init/start the playback.
player.src(wvprDashSrc);
});
})();
</script>
</body>
</html>
HLS & FairPlay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://s3.amazonaws.com/cdn.keyos.com/html5/videojs-contrib-eme/3.5.4/videojs-contrib-eme.min.js"></script>
</head>
<body>
<video id="my-player" class="video-js" controls></video>
<script type="text/javascript">
(function() {
// Init player.
var player = videojs('my-player');
player.eme();
player.on('ready', function() {
// Helper functions.
var base64DecodeUint8Array = function (a) { var b = window.atob(a), c = b.length, d = new Uint8Array(new ArrayBuffer(c)); for (i = 0; i < c; i++)d[i] = b.charCodeAt(i); return d };
var base64EncodeUint8Array = function (a) { for (var d, e, f, g, h, i, j, b = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", c = "", k = 0; k < a.length;)d = a[k++], e = k < a.length ? a[k++] : Number.NaN, f = k < a.length ? a[k++] : Number.NaN, g = d >> 2, h = (3 & d) << 4 | e >> 4, i = (15 & e) << 2 | f >> 6, j = 63 & f, isNaN(e) ? i = j = 64 : isNaN(f) && (j = 64), c += b.charAt(g) + b.charAt(h) + b.charAt(i) + b.charAt(j); return c };
var arrayToString = function (a) { var b = new Uint16Array(a.buffer); return String.fromCharCode.apply(null, b) };
// Setup hls + fp
var fairplayHlsSrc = {
src: 'https://some/asset/master.m3u8',
type: 'application/x-mpegURL',
keySystems: {
'com.apple.fps.1_0': {
certificateUri: '[link to your FairPlay public DER certificate here]',
getContentId: function (emeOptions, initData) {
var contentId = arrayToString(initData);
if (contentId.indexOf("skd://") > -1)
return contentId.split("skd://")[1].substr(0, 32);
throw 'Invalid Content ID format. The format of the Content ID must be the following: skd://xxx where xxx is the Key ID in hex format.';
},
getLicense: function (emeOptions, contentId, keyMessage, callback) {
var data = 'spc=' + base64EncodeUint8Array(keyMessage) + '&assetId=' + contentId;
$.ajax({
url: '[FairPlay License Acquisition Server url]',
type: 'POST',
data: data,
// If you are using proxy, please, remove 'headers' object.
headers: {
'customdata': 'your base64 encoded Authentication XML here that contains FP policies.'
},
contentType: 'application/x-www-form-urlencoded',
success: function (result) {
callback(null, base64DecodeUint8Array(result));
},
error: function (err) {
callback(err);
}
});
}
}
}
};
// Set the source to the player to init/start the playback.
player.src(fairplayHlsSrc);
});
})();
</script>
</body>
</html>
Now a little about variables in those samples.
- [Widevine/PlayReady/FairPlay License Acquisition Server url] – URL of a BuyDRM License Acquisition server of according DRM type;
- [customData] – Custom license request header. It should contain base64encoded Authentication XML – a special token with instructions for License Acquisition Server.
- [FairPlay certificateUri] – Link to FairPlay certificate registered in BuyDRM system (is needed for FairPlay only).
This may seem a little overwhelming at the start – yet do not worry, here at BuyDRM we provide our clients with an extended knowledge base, guidelines for quick and more complicated setups as well as 24/7 tech support, so you won’t get lost.
