Articles in this section

See more

Flowplayer

Note
Our previous version of the wrapper can still be accessed here.

If you are already using a previous version of the wrapper, more detailed information about what has changed can be found in this Documentation.

 

Supported Versions

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

 

Step 1: Install Flowplayer and Streamroot build

Include this sources in the HTML <head>.

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

<!-- Flowplayer hlsjs plugin -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.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 is correctly configurated, 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 ...).
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 as 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 performances with live contents, we recommend setting the following values:

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

Otherwise, liveSyncDuration is not needed for VoD streams.

Related articles