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%

+

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.

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

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.

Fullscreen Playback

Safari for iOS Has Severe Limitations

built-in fullscreen

browser

fullscreen api

+

+

+

Partial

+

—

+

+

—

+

+

+

+

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

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.

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

+

—

—

+

—

—

+

—

—

—

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.

Comments? Questions? Want to join the conversation?

Visit our blog entry to participate in the discussion about HTML5 video