Menu

Lumen help

Integrating Mesh Delivery with Flowplayer

Introduction

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

 

We have built optimized plugins for Flowplayer from v7.2.1.

 

This plugin also works with the new Flowplayer Native from v2.x.

 

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

Important: Since v7.2.1, Flowplayer has an integrated interface to the hls.js client library. We now recommend using this interface. To do so, load the hls.js client library before flowplayer.min.js. For more details, refer to the Flowplayer documentation.

 

To have a fully functional integration with Flowplayer Native, you must use our plugin starting from v1.1.0 (available since Mesh Delivery release 2.17).

Step 1: Install Flowplayer and Mesh Delivery builds

Include these sources in the HTML <head>:

                <!-- hls.js plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/hls.js/0.12.2/hls.light.min.js"></script>

<!-- Flowplayer builds -->
<link rel="stylesheet" href="//releases.flowplayer.org/7.2.7/skin/skin.css">
<script src="//releases.flowplayer.org/7.2.7/flowplayer.min.js"></script>

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

            
                <!-- Flowplayer builds -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/flowplayer-hls-dna-plugin/1/stable/flowplayer-hls-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.

Vizualization graph for Mesh Delivery

Optional: Set up Flowplayer and Mesh Delivery

Include the following code in the HTML <body> :

                <div id="demoplayer"></div>
<script>
  flowplayer.conf.hlsjs = {
    maxBufferSize: 0,
    maxBufferLength: 30,
    liveSyncDuration: 30
  };

  flowplayer.conf.dnaConfig = {};

  window.addEventListener("load", function() {
    flowplayer("#demoplayer", {
      clip: {
        sources: [
          {
            type : "application/x-mpegurl",
            src: "YOUR_PLAYLIST_URL"
          }
        ]
      }
    });
  })
</script>

            
                <div id="demoplayer"></div>
<script>
  window.addEventListener("load", function() {
    flowplayer("#demoplayer", {
      src: "YOUR_PLAYLIST_URL",
      hls : {
    	  maxBufferSize: 0,
    	  maxBufferLength: 30,
    	  liveSyncDuration: 30,
      },
      dnaConfig: {},
    });
  })
</script>

Parameter name

Mandatory

Description

dnaConfig

No

The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).
hls
 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 HLS 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:

                flowplayer.conf.hlsjs = {
  maxBufferSize: 0,
  maxBufferLength: 30,
  liveSyncDuration: 30,
  liveMaxLatencyDuration: Infinity
};

            
                hls : {
  maxBufferSize: 0,
  maxBufferLength: 30,
  liveSyncDuration: 30,
},

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

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.