Skip to content

HLS.js

hls.js is a JavaScript library which implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.

We will guide you through the configuration of hls.js. After this tutorial, you will be fully compatible with Strive's Flink technology.

Prerequisites

You have configured your origin.

You have configured your CDN.

You have a Strive Flink Stream set up.

How to integrate your Stream into your website

1. Update the <head> section:

First, you have to embed our JavaScript at the HEAD section of your website. You should embed our script before you load your player's library.

You will need your stream's token from the stream's detail page at our dashboard. The token will look something like:

token example: ef69bdc6a38e4gh2ae761ffv6c648caf

<!-- Strive Flink integration -->
<script type="text/javascript" src="https://cdn.strivecdn.com/p2pdn/p2pdn.latest.min.js?token=<YOUR_TOKEN>"></script>

<!-- Hls.js library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/hls.js/<YOUR_VERSION>/hls.min.js"></script>

2. And integrate the player in your <body> section:

This is basically the standard player integration, your player does not need to know anything about Flink.

<video id="videoplayer"></video>
<script>
    var hls = new Hls();
    var video = document.getElementById('videoplayer');
    hls.loadSource('<PLAYLIST_URL>');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
</script>

hls.js offers a wide variety of parameters that can be changed in hlsjsConfig object. For informations about all possible parameters see their documentation.

Congrats, you integrated Strive Flink! What's left to do is verifying that everything works correctly.

Next step

Verify Strive Flink is working fine.