Lumen help

Integrating Mesh Delivery with Video.js

Introduction

Mesh Delivery for Streaming can be integrated into your website with Video.js in just a few simple steps.

We have built optimized CDN Mesh Delivery plugins for video platforms using Video.js from v5.0.

The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate Mesh Delivery for streaming with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Not into tutorials?

Code Example

Demo

Step 1: Install Video.js and Mesh Delivery builds

Include these sources in the HTML <head>:

HLS
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>

<!-- Mesh Delivery source handler plugin -->
<script src="//cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>

<!—Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/videojs-hls-dna-plugin/1/stable/videojs-hls-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script>

                            <!-- 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>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/videojs-dash-dna-plugin/1/stable/videojs-dash-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script>

            
        

To get the highest flexibility of deployment, we recommend setting the StreamrootKey in the Query Parameter "srKey".

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

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Optional: Set up Video.js and Mesh Delivery

You can either use the <source> element in the <video> tag or set the source dynamically using player.src() as illustrated below.

Include the following code in the HTML <body>:

HLS
MPEG-DASH

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>

            
        

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
dnaConfig	No	The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).
hlsjsConfig	No	The object in which you can change hls.js options. More information is listed under "Recommended Hls.js options".
YOUR_PLAYLIST_URL	Yes	Your playlist.

Recommended Hls.js options

hls.js has a variety of configuration parameters that can be instantiated in hlsjsConfig object for fine-tuning. You can learn more about them in their API Documentation. For optimal performance with live content, we recommend the following values:

                            var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30,
   "liveSyncDuration": 30,
   "liveMaxLatencyDuration": Infinity
}

            
        

"liveSyncDuration" and "liveMaxLatencyDuration" are not needed for VOD streams.

Note: Video.js source handler is now deprecated

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;
  }
}

            
        

And in just a few easy steps you should have a working integration of Mesh Delivery! We encourage you to explore our documentation to understand the various features we offer so you can make the most out of our product.

Explore CDN services