Lumen help

Integrating Mesh Delivery with Flowplayer

Introduction

Step 1: Install Flowplayer and Mesh Delivery builds

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

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>

            

Recommended Hls.js options

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

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