This article details how to use CDN Mesh Delivery 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-wrapperIn 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 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 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.