This tutorial provides a step-by-step guide to using CDN Mesh Delivery with the video.js player. We have built optimized CDN Mesh Delivery plugins for video platforms using Video.js from v5.0.
Not into tutorials? |
Step 1: Install the Video.js and mesh delivery build
Include these sources in the HTML <head>:
HLS
<!-- Video.js build -->
<link href="//vjs.zencdn.net/7.4.1/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.4.1/video.min.js"></script>
<!-- Streamroot source handler plugin -->
<script src="//cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
<!-- Streamroot DNA plugin -->
<script src="//cdn.streamroot.io/videojs-hls-dna-plugin/1/stable/videojs-hls-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script>
MPEG-DASH
<!-- Video.js build -->
<link href="//vjs.zencdn.net/7.4.1/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.4.1/video.min.js"></script>
<!-- videojs-contrib-dash -->
<script src="//cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.3/videojs-dash.min.js"></script>
<!-- Streamroot DNA plugin -->
<script src="//cdn.streamroot.io/videojs-dash-dna-plugin/1/stable/videojs-dash-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script>
| Parameter name | Mandatory | Description |
|---|---|---|
| YOUR_STREAMROOT_KEY | Yes | The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard. |
Step 2: Visualize mesh delivery in action
| In order to verify if CDN Mesh Delivery was correctly configured, please install our Graphs. |
Optional: Set up Video.js and Streamroot
You can either use the <source> element in the <video> tag or set the source dynamically using player.src() as illustrated below in the snippets.
Include the following code in the HTML <body>:
HLS
source in <video> tag
<video id="demoplayer" class="video-js" controls>
<source src="YOUR_PLAYLIST_URL" type="application/x-mpegURL">
</video>
<script>
var options = {
html5: {
hlsjsConfig: {},
},
dnaConfig: {},
};
var player = videojs("demoplayer", options);
</script>
dynamic source
<video id="demoplayer" class="video-js" controls></video>
<script>
var options = {
html5: {
hlsjsConfig: {},
},
dnaConfig: {},
};
var player = videojs("demoplayer", options);
player.src("YOUR_PLAYLIST_URL");
</script>
MPEG-DASH
source in <video> tag
<video id="demoplayer" class="video-js" controls>
<source src="YOUR_PLAYLIST_URL" type="application/dash+xml">
</video>
<script>
var options = {
html5: {
dash: {},
},
dnaConfig: {},
};
var player = videojs("demoplayer", options);
</script>
dynamic source
<video id="demoplayer" class="video-js" controls></video>
<script>
var options = {
html5: {
dash: {},
},
dnaConfig: {},
};
var player = videojs("demoplayer", options);
player.src("YOUR_PLAYLIST_URL");
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| YOUR_PLAYLIST_URL | Yes |
Your HLS playlist. |
| dnaConfig | No | The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| hlsjsConfig | No | The object in which you can change hls.js options. More information can be found hereunder. |
Recommended hls.js options
hls.js has a wide variety of configuration parameters that can be instantiated in hlsjsConfig object for fine-tuning. You can learn more about them in their API Documentation.
To get the best performances with live contents, we recommend setting the following values:
hlsjsConfig = {
"maxBufferSize": 0,
"maxBufferLength": 30,
"liveSyncDuration": 30,
"liveMaxLatencyDuration": Infinity
}Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.
Migrating from videojs-contrib-hls
If you were using the Video.js Source Handler, please note that with our source handler and hls.js, you need to configure the XMLHttpRequest.withCredentials passing the following option in the hlsjsConfig.
hlsjsConfig: {
xhrSetup: function(xhr, url) {
xhr.withCredentials = true;
}
}