Lumen help

Integrating Mesh Delivery with Video.js

Introduction

Step 1: Install Video.js and Mesh Delivery builds

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

Vizualization graph for Mesh Delivery

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


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>

            

Recommended Hls.js options

Migrating from videojs-contrib-hls

                hlsjsConfig: {
  xhrSetup: function(xhr, url) {
    xhr.withCredentials = true;
  }
}