The state of
html5 video

HTML5 is taking over online video, which is both exciting and challenging for developers in the industry. With the HTML5 specification and the various browser implementations in constant flux, we at JW Player spend a significant amount of time understanding the possibilities of this technology and optimizing our own products for HTML5.

This State of HTML5 Video Report is a compilation of our research, focused on HTML5 video playback. We are excited to share our findings with other developers in the industry as we explore just what HTML5 can and cannot support today. We hope that you will benefit from our findings.

Our tests are grouped into the topics we find to be most critical for online video. As HTML5 Video evolves, so will this report. If a new browser or a new technology gains traction, we will add it to the report. As always, we look forward to feedback from the online video community.

Browser Market Shares

All Popular Browsers Support HTML5 Video

In this report, we use public market share data from our network of publishers. Every month, over 1 billion unique viewers generate over 10 billion video plays in JW Player, making this data set the largest publicly available for online video.

All popular browsers in wide use today support HTML5 video. The only holdout is Internet Explorer version 8 (2% market share). JW Player does not have insights into mobile proxy browsers (like Opera Mini, UC Browser and Nokia Xpress), since these support neither HTML5 video nor the Flash plugin.

market share browser html5 support
42.5%
+
14.7%
+
14.1%
+
10.6%
+
6.1%
+
6.0%
+
3.4%
+
1.7%
+
0.4%
+
0.1%
+
Market Data Browser Test Details

Video & Audio Codecs

H.264 Video & AAC Audio Play Everywhere

video codecs browser audio codecs
H.264, VP8, VP9
+
AAC, MP3, Vorbis, Opus
H.264
+
AAC, MP3
H.264, VP8, VP9
+
AAC, MP3, Vorbis, Opus
H.264
+
AAC, MP3
H.264, VP8, VP9
+
AAC, MP3, Vorbis
H.264, VP8
+
AAC, MP3, Vorbis
H.264
+
AAC, MP3
VP8, VP9
+
Vorbis, Opus
H.264
+
AAC, MP3
H.264, VP8, VP9
+
AAC, Vorbis, Opus
Video & Audio Codec Details

Until recently, the biggest challenge with HTML5 video was the split support for video codecs. Some browsers supported H.264, others supported VP8 (commonly known as WebM). Firefox resolved this standoff by rolling out H.264 support across Windows (22+), Linux (26+) and Mac (35+). This means H.264 can now be played everywhere, when using a Flash fallback for Opera and IE8.

For next-generation codecs, the situation is reversed. Here, the open-source VP9 is already supported on several browsers, while HEVC doesn’t play anywhere yet. Since VP9/HEVC generate the same video quality as H.264/VP8 at half the datarate, a dual H.264+VP9 strategy could reduce costs for companies where bandwidth drives the bills.

Tag Attributes & APIs

Solid Support, But Some Mobile Caveats

The HTML5 video tag supports several attributes for setting a poster image, built-in controls, data preloading and autoplay, loop & mute. Posters and controls work on all browsers, but video preloading is always disabled on mobile browsers. Additionally, mobile Safari, Chrome and Stock Browser don’t support autoplay, loop & mute (e.g. for background video).

In terms of scripting APIs, we test the ability to programmatically manage content loading, video playback, timeline seeking and changing the volume. Here too, all desktop browsers fully support all these cases. Interestingly, mobile Safari, Chrome and Stock Browser do support programmatic playback of content in response to user events (clicks, touches). They still don’t support programmatic volume control.

tag attributes browser scripting apis
+
+
+
Partial
+
Partial
Partial
+
Partial
Partial
+
Partial
+
+
+
+
Tag Attributes Test Details: Poster Preload Autoplay Controls
Scripting API Test Details: Loading Playback Seeking Volume

Fullscreen Playback

Safari for iOS Has Severe Limitations

built-in fullscreen browser fullscreen api
+
+
+
Partial
+
+
+
+
+
+
+
Fullscreen Playback Test Details

While a minor feature at first sight, fullscreen playback is essential to online video. It enhances the visual experience and increases viewer engagement. There are two types of fullscreen support: built-in, using standard controls, and custom, using the W3C fullscreen API.

Built-in toggling is supported on all browsers, except Safari on iPhone. There, video cannot play inline; it always plays fullscreen only. The Fullscreen API is also not supported by iOS (iPhone+iPad), as well as the Android Stock Browser. These two browsers do support the Webkit specific enterFullscreen() API, used to programmatically invoke the built-in fullscreen UI.

Text Tracks & WebVTT

Solid Support, But Some Mobile Caveats

The HTML5 element and WebVTT file format are a great step forward for making online videos more accessible to both humans and machines. Together, they not only add closed captions to videos, but also subtitles, descriptions, chapter markers and other timed metadata (like preview thumbnails).

All major browsers (except Stock Browser) now support WebVTT captioning, styling and scripting. However, not everything works everywhere. Firefox is missing a CC (closed caption) button in its controlbar, as well as CSS cue styling and API support for cue changes. Internet Explorer does not support cue styling and positioning yet. Finally, note the WebVTT W3C Spec is still in draft, including the currently unsupported regions feature.

browser basic cc vtt styling scripting
+
+
+
Partial Partial Partial
+
+
+
+
+
+
+
Partial Partial Partial
Track Test Details WebVTT Test Details Scripting Test Details

Adaptive Streaming

HTML5 Streaming is Still Fragmented

The Media Source Extensions and Encrypted Media Extensions are relatively new APIs for building adaptive streaming applications with content protection. Several browsers support these APIs, but severe limitations still exist. Safari doesn’t support MSE/EME on iOS, plus its EME key system (known as FairPlay) remains a mystery. Internet Explorer only supports MSE/EME on Windows 8.1, plus EME is not available on Windows Phone. EME is also not available in Opera.

The fallback for MSE/EME in HTML5 is Apple’s custom HLS streaming protocol. Cross-browser support is equally lacking here. In practice, only Safari on iOS supports HLS fully, with Safari on Mac missing items like 608 captioning & ID3 metadata and Chrome/Browser on Android also having poor adaptive heuristics implementations.

browser mse eme hls
+
+
+
+
+
Partial
+
Partial
+
Partial
+
+
+
MSE Test Details HLS Test Details

Comments? Questions? Want to join the conversation?

Visit our blog to participate in the discussion