HLS video works in all browsers on iOS and Chrome Mobile on Android devices but on the desktop, the only browser that supports HLS video natively is Safari. The good news is that it is possible to play HLS video in other desktop browsers, such as Chrome or Firefox, but you need a little help from some third-party tools. There are two options available:
- Flash player with a plugin that handles HLS video
- Use the HTML5 video element and Media Source Extensions (MSE)
We’ll look at an example of each in turn and discuss how they work in more detail.
Flash Player with Plugin
Flash works across practically all desktop browsers (and some mobile ones) so you can be confident that your HLS videos will be viewable across a variety of different browsers and platforms (Windows, Mac, Linux).
For the example, I’m going to use the Flashls plugin. It works with a number of different Flash players and supports a variety of HLS features such as adaptive streaming, encryption, and so on.
Given that Flash is being phased out, this solution may not be the best one going forward. Having said that, it’s unlikely that Flash is going to disappear completely in the next year or two but it is on the way out. The future is HTML5 video and that’s what we’ll look at next.
HTML5 + Media Source Extensions
To demonstrate how to use the HTML5 video element to play HLS video, I’m going to use the hls.js library. Check out the getting started guide for more information.
Try viewing the example in a compatible browser.
One thing you need to be aware of is browser compatibility. Although the MSE specification provides some guidelines on how the API should behave it does vary across browsers. You also need a relatively recent version of a browser both on the desktop and mobile device. (On iOS, MSE is not supported at all!)