This article details how to integrate CDN Mesh Delivery into Clappr Player, an open-source extensible media player for the web.
We have built an optimized plugin for Clappr from v0.2.51.
Not into tutorials? |
Step 1: Install Clappr and Streamroot build
Include these sources in the HTML <head>:
<!-- Clappr build -->
<script src="//cdn.jsdelivr.net/npm/clappr@0.3.1/dist/clappr.min.js"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/clappr-hls-dna-plugin/1/stable/clappr-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: Set up Clappr and Streamroot
Include the following code in the HTML <body>:
<div id="demoplayer"></div>
<script>
var player = new Clappr.Player({
source: "YOUR_PLAYLIST_URL",
parentId: "#demoplayer",
plugins: {
playback: [HlsDnaPlugin]
},
dnaConfig: {},
hlsjsConfig: {},
});
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| hlsjsConfig | No |
The object in which you can change hls.js options. More information can be found hereunder. |
| HlsDnaPlugin | Yes | The name of the Streamroot playback plugin. |
| YOUR_PLAYLIST_URL | Yes | Your HLS playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |
Recommended hls.js options
hls.js has a wide variety of configuration parameters that can be instantiated in hlsjsConfig 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:
hlsjsConfig: {
"maxBufferSize": 0,
"maxBufferLength": 30,
"liveSyncDuration": 30,
"liveMaxLatencyDuration": Infinity
}Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.