HLS video works in all browsers on iOS 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 browsers, such as Chrome or Firefox, but you need to use a workaround. 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. You can view the example here.
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
Try viewing the example in a compatible browser.
The drawback of this approach 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!)
Update: Part 2 is now available