This article details how to use Streamroot DNA™ with hls.js, the open-source and most widely used HLS player in the world.

We have built an optimized wrapper for Hls.js from v0.6.21.

Not into tutorials?

Step 1: Install Hls.js and Streamroot builds

From our CDN

Include these sources in the HTML <head>:

<!-- Hls.js build -->
<script src="//cdn.jsdelivr.net/npm/hls.js@0.12.2/dist/hls.min.js"></script>

<!-- Streamroot wrapper -->
<script src="//cdn.streamroot.io/hlsjs-dna-wrapper/1/stable/hlsjs-dna-wrapper.js"></script>

Using npm

Install runtime and dev dependencies:

npm install @streamroot/hlsjs-dna-wrapper

In your application, import/require the package you want to use, similar to this example:

import HlsjsDnaWrapper from '@streamroot/hlsjs-dna-wrapper';

Step 2: Set up Hls.js and Streamroot

In the HTML <body> or with npm

<video id="demoplayer"></video>
<script>
    var hlsjsConfig = {};
    var dnaConfig = {};
    var hls = new Hls(hlsjsConfig);
    var wrapper = new HlsjsDnaWrapper(hls, 'YOUR_STREAMROOT_KEY', dnaConfig);
    var video = document.getElementById('demoplayer');
    hls.loadSource('YOUR_PLAYLIST_URL');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
</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 here.
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.
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 performance with live content, we recommend setting the following values:

var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30,
   "liveSyncDuration": 30,
   "liveMaxLatencyDuration": Infinity
}

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

Players