Using HLS Streaming

To access these features, Upgrade Now

Embedding a Stream

Embedding an HLS stream using JW Player is a matter of providing the location to the stream's M3U8 manifest file. This is essentially the same as using an MP4 as mentioned on our embedding topic, however we'll instead be pointing to an M3U8:

var playerInstance = jwplayer("myElement");
playerInstance.setup({
    file: "/assets/myVideoStream.m3u8",
    image: "/assets/myPoster.jpg"
});
 

You all know what time it is! It is... stream time.

Using HLS with a Video File Backup

Our HLS provider requires Flash to function on all desktop browsers other than Safari for OSX and Microsoft Edge. If you are using an HLS stream for on-demand content, it is possible to set up a fallback video file that will work properly in supported browsers in HTML5. The use of fallbacks can be seen here:

var playerInstance = jwplayer("myElement");
playerInstance.setup({
    playlist: [{
        image: "/assets/myPoster.jpg",
        sources: [{ 
            file: "/assets/myStream.m3u8"
        },{
            file: "/assets/myVideo.mp4"
        }]
    }],
    primary: "flash"
});

With the sources configured within a playlist block, we also have the primary option set to flash.

Customizing Quality Labels

Sometimes it is necessary to adjust the quality labels inside the HD menu. You can do this with hlslabels configuration option.

hlslabels
By default, the JW Player will set video quality levels using information from the manifest files. Use this configuration option to apply a custom quality label to a desired bandwidth in kbps. For example:
    hlslabels:{
           "2500":"High",
           "1000":"Medium"
	}

Using HLS on Android

HLS playback quality and performance varies widely across Android versions and devices. For this reason, by default JW Player disables HLS playback on Android devices. For Android devices running 4.1 and higher, you can enable HLS streams to be played with the following configuration option.

androidhls
As of JW 7.0.1, the default value for this flag is true.

HLS on browsers with native HLS support

On browsers that natively support HLS playback (Safari, Edge, Android Chrome), the player will let the browser to render the HLS stream directly in a video tag. Because of this, quality switching (HD button) is not available on the player controls.

Did you find this article helpful?

Please log in to rate this article.