Enable HLS native playback

What is HLS Native Playback?

If you’re looking to add HLS native playback to your web app, there are a few things you need to know. Firstly, HLS is a streaming protocol used by Apple. It’s based on MPEG-4, which means it can be used to stream both video and audio. Second, HLS is not supported by all browsers.

Safari, for example, has built-in (native) support for HLS, but other browsers do not. This means that if you want to use HLS with other browsers, you’ll need to use a third-party library or plugin.

Finally, HLS is a bit more complicated than other streaming protocols, so you’ll need to make sure you have a good understanding of how it works before you try to implement it.

What HLS native playback isn’t, is playing back the HLS stream in a JavaScript video player like VideoJS or JWPlayer. We are referring to the browser natively supporting HLS playback by simply pasting the URL to the HLS manifest (m3u8 file) into the browser address bar and the browser playing back the stream.

How HLS Native Playback Works

Since its inception, HTTP Live Streaming (HLS) has been the go-to protocol for streaming video on the web. Despite its many benefits, HLS has one major drawback: it doesn’t work natively on all browsers. In order to playback HLS video on these browsers, a plugin or third-party application is required.

This can either be in the form of a browser plugin or JavaScript library. This is where hls.js comes in. hls.js is a JavaScript library that brings HLS support to all browsers. With hls.js, you can watch HLS video on any browser, without the need for a plugin or third-party application.

In addition to being easy to use, hls.js is also open source and free to use. If you’re looking for a way to playback HLS video on all browsers, hls.js is the perfect solution.

The Advantages of Native HLS Playback

If the browser natively supports HLS playback or you have added a third party plugin to make the browser support HLS natively, there are many benefits. For example, if the browser does not support HLS natively, then you would need to rely on a compatible web player for HLS playback.

While there are some free players that support HLS playback, some players are commercial and require subscriptions. They take some technical knowlege to setup the player and are prone to errors if not setup correctly.

By taking advantage of the browsers native HLS playback, you can immediately playback HLS video. All mobile browsers support HLS playback and also Safari on desktop.

The Disadvantages of Native HLS Playback

The main disadvantages of relying on the native browser HLS playback is that the HLS versions can be outdated. This can cause incompatiblity with the HLS video you are trying to playback.

Furthermore, the subtitle format that is supported can be limited to VTT which can result in no subtitles showing up if the HLS video asset is not using the VTT format.

How to Implement HLS Native Playback

If your browser already supports HLS, like Safari, then there isn’t anything you need to do. It should just work out the box. However, its possible to install some third party browser plugins to make your browser support HLS playback natively.

For example, the most popular plugin for Chrome is Native HLS Playback it has over 200,000 downloads and 237 reviews as of writing this post with an overall rating of 4.5. What is great about this browser plugin is that it supports multiple HLS versions and also uses the most popular HLS web player, HLS.js so you know that the versioning and HLS support will be up-to-date.  

Leave a comment