(Bringing back) HTML5 HLS support in Videojs

videojs-hls-html5Lately I’m focussing a lot on video as you’ve might have noticed and I kinda left flash and fully focus on HTML5. I guess the most important thing is delivery, meaning a video or pre-roll is delivered as fast and stable as possible. In the start I did a lot of research on which player to use and I chose Videojs because it’s the perfect framework for building a custom HTML5 player.

To solve issues on mobile connecting with 3G I decided I had to use HLS, basically the same as Youtube does. But any test I did with Videojs failed, meaning any test I did on browsers that natively support HLS and AES. So I was kinda surprised to see that an HTML5 based vide0 player doesn’t support something that is natively supported by HTML5. Just to be clear, this mostly applies to Chrome on Android.

After a little research I found that the cause for this is that Videojs completely relies on the “canplaytype” property, but as you can see here support for that method of checking browser support for HLS is far from perfect to say the least. But luckily that’s a problem that can easily be solved by doing some editing in the video.dev.js file. Obviously you can’t use the minified video.min.js file anymore but you can easily minify the dev version yourself.

So first I’ve expanded some variables to better know what platform/browser I’m dealing with:

The if statement for the safari check is because on mobile the string “safari” is for instance also present in the user agent of the Chrome browser.

Next I made a function to determine if the client offers support for HLS which I placed right after the function vjs.Html5.isSupported:

Next we need to change two functions: vjs.Html5.canPlaySource and vjs.Player.prototype.selectSource because that’s where the support is checked:

Obviously this only works in browsers that support HLS, which include Safari, any IOS browser and at least Chrome and the native browser on Android >2.3. But on desktop the need for streaming static files is not really necessary and Videojs offers flash fallback for that as well as a plugin that plays HLS video on platforms that don’t support it but have Flash. Oh, and here’s a demo of the end result.

So there you go, all ingredients for HLS support in Videojs. Interesting to see what the guys from Videojs will do with the committed code.

Comments are closed.