Web Players

See more

Clappr

This article details how to integrate Streamroot DNA™ 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#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: 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 DNA 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.

Related articles