Web Players

See more

Video.js

This tutorial provides a step-by-step guide to using Streamroot DNA™ with the video.js player.

We have built optimized Streamroot DNA™ plugins for video platforms using Video.js from v5.0.

 

Not into tutorials?

 

Step 1: Install the Video.js and Streamroot 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#streamrootKey=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#streamrootKey=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 Streamroot

In order to verify if Streamroot was correctly configured, please install our DNA 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 the Streamroot 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;
  }
}

Related articles