An overview of open source HTML5 video players
The video player is one of the most essential things in any OTT app, whether it’s for SmartTV, set-top-box, or just the web. So picking the right one for your use case is vital to success. There are many free-to-use options out there, so let’s take a look and see what each one has to offer.
Two categories of players
Before I can start listing the options available, it’s important to note that the video players in this overview fall into roughly two areas. On the one hand, you have video players that will attempt to play any video (or audio) type you pass it. Whether it’s MPEG-Dash, HLS, or Smooth Streaming; the video player in our first category will generally have support for all of those. Our second category is very much more limited. The second category really only consists of the ‘specialist’ video players. Their focus solely lies on playing only MPEG-Dash, or only HLS, as an example. They are not all-rounders, contrary to those in the first category.
This distinction is important to make since you might have a need for offering multiple video types to various browsers and devices. Especially in the case where you have needs for DRM, using an all-rounder is the best approach in my opinion. You’ll want to use HLS and Fairplay on Apple devices, while you would opt for MPEG-Dash and Widevine (which are not supported on Apple devices) on others. On the other hand, if your interests solely lie in offering HLS, then you may as well use a player only tailored for that use case.
The all-rounders
Starting off with the ‘all-round’ video players, we’ll focus in this list on several criteria. I won’t be sharing any subjective opinion and rather list only the types of support the player has. That should hopefully give you a good idea of what to expect when using your player of choice. For this we’ll list the following aspects:
- Video types (examples: MPEG-Dash, HLS, Smooth Streaming)
- DRM types (examples: Widevine, Playready, Fairplay)
- Platform support (examples: web, Smart TVs, consoles)
- Advanced features (examples: low latency, advertising)
Shakaplayer
The first in our list of all-rounders is Shakaplayer. This player is developed an open-source by a team at Google and is the default player you’ll get when developing a Chromecast application. Besides that, it can be used on any HTML5-capable platform, of which a bunch of them are officially supported.
Github: https://github.com/shaka-project/shaka-player
Video types:
- MPEG-Dash
- HLS
DRM types:
- Widevine
- Fairplay
- PlayReady
Platforms supported:
- Web browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari
- Smart TVs: Samsung Tizen (2017+, 2016 not officially supported), LG WebOS (expected to work, not officially supported), Xbox One, Playstation 4 and 5 (expected to work, not officially supported)
Advanced features:
- Low Latency
- Client-side ads
- Server-side ads (with Google DAI)
VideoJS
Second up is another very well-known video player, called VideoJS. Having been embedded into over 700.000 websites, chances are you’ve definitely watched video content with VideoJS doing all the magic without you knowing it.
Side note: for clarification, VideoJS comes with a lot of its functionality separated into plugins. For the sake of this blog, we’ll count those plugins towards the list of features supported.
Github: https://github.com/videojs/video.js
Video types:
- MPEG-Dash
- HLS
DRM types:
- Widevine
- Fairplay
- PlayReady
Platform support: Modern MSE/EME capable devices (unspecified which browsers, Smart TVs, and others)
Advanced features:
- Low Latency (experimental support)
- Client-side ads
- Server-side ads (manual ad markers)
The specialists
In the second part of this blog, we’ll look at the specialists. Rather than trying to be an all-rounder, the video players in this list really are one-trick ponies; focusing only on one type of video format. We’ll list the same topics as we did for the all-rounders.
Dash.js
If you’re interested in only MPEG-Dash, this really is the first starting point. Dash.js is the ‘official’ reference player for MPEG-Dash playback and is organized by the ‘Dash Industry Forum’, a non-profit organization trying to move MPEG-Dash further along in the industry.
Side note: Dash.JS can actually support Smooth Streaming via an optional plugin. Its core focus however lies fully with MPEG-Dash streams. But it does make this player more multifunctional, which makes it worth noting.
Github: https://github.com/Dash-Industry-Forum/dash.js/
Video type: MPEG-Dash
DRM types:
- Widevine
- PlayReady
Platform support: Modern MSE/EME capable devices (unspecified which browsers, Smart TVs, and others)
Advanced features:
- Low Latency
- Server-side ads (Inband MPD reload, Inline MPD reload, XLink remote elements, Inband SCTE35 events)
HLS.js
For our final player in the list, we’ll look at the defacto player for all your HLS playback. This open-source player is maintained by enthusiasts and is used by many big companies in the industry like Globo, Fox Sports, and Viacom.
Side note: HLS.js explicitly doesn’t support Fairplay DRM, which you’ll commonly see being used with HLS streams. If you do need Fairplay support, they recommend natively using the HTML5 video element on Safari browsers. Support is however being worked on!
Github: https://github.com/video-dev/hls.js/
Video type: HLS
DRM type: Widevine CDM (not widely tested)
Platform support:
- Web browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari
- Modern MSE/EME capable devices (unspecified which Smart TVs, and others)
Advanced features:
- Low latency
- Server-side ads
Summing up
I’ve tried to keep this blog rather simple by only providing an overview of some open-source video players. The ones listed really are the players I would first look at, and see if they cover your needs. All of them are widely used players that constantly get new developments from the big communities behind them. So you can definitely expect they’ll deliver!
In need of more information about any of these players, struggling to make a choice? Or do you feel I’ve missed something in this blog? Don’t hesitate to reach out!
PS. if you’re interested in commercial video players instead, you can read an overview of those in my ‘Commercial Video Player Overview’ blog!
