Important
Since v7.2.1, Flowplayer has an integrated interface to the hls.js client library. It is now recommended to use it. In order to do so, load the hls.js client library before flowplayer.min.js
For more details, please refer to Flowplayer documentation.

Supported Versions

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

Not into tutorials?

Step 1: Install Flowplayer and Streamroot build

Include these sources in the HTML <head>:

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

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

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

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>

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).
hlsjs	No	The object in which you can change hls.js options. More information can be found hereunder.
YOUR_PLAYLIST_URL	Yes	Your HLS playlist.

Recommended hls.js options

hls.js has a wide variety of configuration parameters that can be instantiated in hlsjs object for fine-tuning. You can learn more about them in their API Documentation.

To get the best performance with live content, we recommend setting the following values:

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

Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.

Flowplayer