Play HLS with HTML5

Question

So i'm trying to play HLS streams on HTML5 without using Flash. We've tried many video players but they all relay on a flash player. My question, is it possible to play HLS streams (any) on HTML5 without using Flash?

(I know of the https://github.com/RReverser/mpegts but it doesn't work on mobile and is pretty laggy.)

Solution 1

HLS is not supported by all browsers. I use a jwPlayer which supports both flash and HTML5 streaming (when available). Support for HLS streaming unfortunately still needs to rely on Flash to work properly across various browsers. See HTML5 HLS browser support: http://www.jwplayer.com/html5/hls/

Solution 2

HLS.js project is quite reliable nowadays (https://github.com/video-dev/hls.js/tree/master). It is suppported in the latest versions of the browsers. It does not rely on Flash. It can be used in flowplayer. hls.js is compatible with browsers supporting MSE with 'video/MP4' inputs. supported on:

• Chrome for Android 34+
• Chrome for Desktop 34+
• Firefox for Android 41+
• Firefox for Desktop 42+
• IE11+ for Windows 8.1+
• Edge for Windows 10+
• Opera for Desktop
• Vivaldi for Desktop
• Safari for Mac 8+ (beta)

Solution 3

There is no mature stable open-source HLS HTML5 player AFAIK. However there are two commercial offerings:

• Viblast Player - very cheap and relatively easy to use. This one is just a bare minimum HLS HTML5 playback. The developer has to do the UI themselves or integrate it with Video.js/Flowplayer/JWPlayer.
• Theo Player - I haven't had much experience with this one. The pricing is not public. The demo looks OK and it even works on most version of Firefox.

Both of these players rely on the MSE API and don't work on browsers where it's not supported (IE <= 10, Firefox).

Solution 4

Basically all HTML5 players need to transmux the MPEG2-TS (transport stream) segments to MP4 as most browsers do not support MPEG2-TS natively.

There are actually a few HTML5 players available which are capable of playing back HLS streams. One example would be the Bitmovin Player, which offers professional support as well as a fallback for legacy browsers. It's a commercial product, but they also provides a free plan. Also open-source projects like hls.js are available.

However, with Apple's announcement from this year's WWDC it's now also possible to use MP4 segments with HLS, which eliminates the need to transmux. More details on how to do it and advantages are outlined pretty well in this article. Not sure which players support it, at least Apple's native implementation in Safari on iOS 10 and macOS; also Bitmovin already supports it.

Solution 5

THEOplayer is very interesting for this case. They allow to stream using HLS to all the popular browsers and platforms without using Flash.

They have support for Internet Explorer, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac, iOS, Android and Windows Phone.

Also, contrary to earlier answers, they don't rely on MSE in order to function. As a result, this player works on all the platforms and even old IE versions (10 and up) and browsers that do not support MSE.

View more solutions

Comments

[Dallox]

But is it in any way possible to make it support it? Like stripping the stream in JavaScript and playing the h264 video?

[Sixthpoint]

RReverser has a interesting implementation, but doing conversion in JavaScript would be heavy on the browser (hence the lag on mobile). I don't think your solution should rely on JavaScript to do the heavy lifting. Many sites use streaming engines which can provide an array of formats (hls, rtmp, mpeg-dash) to cover as many browsers natively using HTML5 as possible. They then switch to flash as a fallback. So to answer your question, its possible. But I think it might not be worth it.

[Dallox]

well this is gonna be an opensource project, so i think it'll defiantly be worth it for other people also. Relaying on the server to do the work is not a solution to us, so i guess we have to go with conversion..

[Sixthpoint]

Sounds like a great open source project. In the future this could be very useful for people. Good luck!

[Dallox]

But im curious, how did they achieve this all? Is it in combination with Emscripten for making use of C++ decoders?

[MrP]

They seem to use the in browser hardware support, decoding all happens in the browser itself. It does not appear to be emscripten. Emscripten would probably be too slow (see the broadway.js project)

[MrP]

THEOplayer is actually not requiring MSE. It also runs on Firefox, IE10, Opera, ...