This article details how to integrate CDN Mesh Delivery into Flowplayer, an HTML5 video player for the web.
We have built optimized plugins for Flowplayer from v7.2.1.
This plugin also works with the new Flowplayer Native from v2.x.
Since v7.2.1, Flowplayer has an integrated interface to the hls.js client library. It is now recommended to use this interface. In order to do so, load the
hls.js client library before flowplayer.min.jsFor more details, please refer to the Flowplayer documentation.
In order to have a fully working integration with Flowplayer Native, you must use our pluggin starting from v1.1.0 (available since DNA 2.17)
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.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>
<!-- Streamroot 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>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/flowplayer-hls-dna-plugin/1/stable/flowplayer-hls-dna-plugin.js?srKey=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 Mesh Delivery 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><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 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
};hls : {
maxBufferSize: 0,
maxBufferLength: 30,
liveSyncDuration: 30,
},Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.