THE STATE OFHTML5 VIDEO

TABLE OF CONTENTS

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 Share

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 12 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. 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

A huge challenge with HTML5 video used to be 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 only Microsoft Edge supports HEVC. 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.

VIDEO CODECS

BROWSER

AUDIO CODECS

H264

H265

VP8

VP9

AAC

MP3

VORBIS

OPUS

-

Desktop

-

Android

-

-

-

-

iOS

-

-

-

Desktop

-

-

-

Desktop

-

-

-

-

Android

-

-

-

-

Desktop

-

-

-

-

Desktop

-

-

-

-

-

Desktop

Tag Attributes & Programmatic Playback

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 Stock Browsers and older versions of Safari and Chrome don’t support autoplay.

We also 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.

Fullscreen Playback

Safari for iOS Has Severe Limitations

built-in fullscreen

browser

fullscreen api

Desktop

Android

Partial

iOS

—

Desktop

Desktop

Android

—

Desktop

Desktop

Desktop

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 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.

Tracks & WebVTT

Solid Support with Some 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, and TextTracks are supported in IE 10+ and Edge; however, the onchange event is not yet supported. 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.

JW Player provides cross-browser support for three formats of adaptive streaming, Apple HLS, MPEG-DASH, and RTMP. HLS and DASH are supported in JavaScript and HTML5 whereas RTMP requires the Flash plugin to be installed on the user’s device. As Flash has become an outdated technology and is being deprecated by most major browsers, we highly recommend switching to a modern format like HLS or DASH.