Open-sourcing our first videojs plugins: videojs-hls.js and videojs-quality-picker !


At Streamroot we support and use many open-source projects. And we started opening up more of our own projects, be it small DevOps tools or core media projects.
As we created this blog to talk about our development work at Streamroot, here is the place we will present our latest open-source releases, and explain what they are for.

Thus we are very happy to announce that we are open-sourcing two videojs plugins we are currently using at Streamroot: videojs-hls.js and videojs-quality-picker.

Videojs-hls.js

TL;DR: Github code here

Videojs-hls.js is an integration of hls.js into VideoJS 5. Hls.js is an open-source media engine developed and maintained by Mangui from Dailymotion, enabling HLS playback directly in HTML5. It has been quickly gaining popularity since its release last November, and is being used in production by large broadcasters all over the world.

The particularity of this plugin is that it uses VJ5's new Source Handler interface, which makes the integration of external media engines a lot easier and more robust.

It supports all playback features (play, pause, seek, auto quality switch), and can be integrated with any other VJS5 plugin. We also added support for easy manual quality switching, a feature that is cruelly lacking in the other media engine integrations we saw out there!

Videojs-quality-picker

TL;DR: Github code here

Videojs-quality-picker is a simple videojs5 plugin allowing you to add a manual quality/language/subtitles selector in the videojs controlbar.

We initially built the quality picker for our hls.js integration, but then saw that all modern HTML5 media engine integrations were missing this feature: even videojs-contrib-dash doesn't have a manual quality picker selector.

We therefore built this plugin to be very easily usable with any other Source Handler or Tech in videoJS 5. You'd just need to add an event listener and to format your quality switching events in our standardized format.

Even cooler - we've have been talking with the videojs team about a possible integration of this feature into Videojs Core, and even in the HTML5 video tag directly, as multi-bitrate and multi-audio has become a standard today for video and audio streaming.

By the way, if you want to try to add it to dash.js, here is the videojs-contrib-dash issue talking about it!

What's next?

We have a few other projects we are going to open-source soon - stay tuned!