The State of HTML5 Video

Created by Jeroen Wijering

Last Updated on

Join the conversation: Comment on our latest blog post or:  

 

HTML5 has entered the online video market, 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.

The 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/users in the industry as we explore just what HTML5 can and cannot support today. As we continue to build out our products, we will continue to update this report — publishing our up-to-date results here.

Note: we have grouped our test results into the topics we find to be most critical for online video. As HTML5 Video evolves, so will this report. If a browser or device gains traction, we will add it here. The same goes for those features of HTML5 Video that are not widely used yet. We hope that you will benefit from our findings. As always, we look forward to feedback from the online video community.

 

1 Market Shares

80% of the market supports HTML5

In this report, we use market data from StatCounter, one of the world’s largest analytics firms. We combined their desktop and mobile data into a single report.

Over 80% of the market now supports HTML5 video. On the desktop, Internet Explorer 8 is the dominant non-HTML5 browser. On mobile, the non-HTML5 line mainly consists of proxy browsers like Opera Mini, UC Browser and Nokia Xpress.

Browser/Device Market Share HTML5 Video Flash Video
Chrome 33%
Yes Yes
Firefox 14%
Yes Yes
Internet Explorer 9+ 12%
Yes Yes
Android 11%
Yes No
iOS 9%
Yes No
Safari 4%
Yes Yes
Other (desktop) 8%
No Yes
Other (mobile) 10%
No No
    Test Details Test Details

Note platforms like the Kindle Fire, Windows Phone, XboX, Chromecast and Opera are all below 1% market share. When one hits that threshold, we will start listing it.

2 Media Formats

100% of Browsers Support MP4 Video

Until recently, the biggest challenge with HTML5 video was the split support for audio/video formats. Some browsers supported MP4, others supported WebM. Firefox resolved this issue by rolling out MP4 support to Windows & Android. Firefox is still working on Mac support, at which point MP4 will be ubiquitous.

On the mobile side, MP4 has always played across devices. Android 4 did introduce support for WebM video. It mostly uses software decoding instead of hardware routines though, meaning lower performance and shorter battery life.

Browser/Device Video Formats Audio Formats Multiple Sources
Chrome MP4, WebM AAC, MP3, Vorbis Yes
Firefox MP4, WebM AAC, MP3, Vorbis Yes
Internet Explorer MP4 AAC, MP3 Yes
Android MP4 AAC, MP3 Yes
iOS MP4 AAC, MP3 Yes
Safari MP4 AAC, MP3 Yes
  Test Details Test Details Test Details

Note that just about any mobile phone can play MP4 video through a built-in media player. Offering an MP4 download link therefore enables playback on older mobile platforms.

3 Tag Attributes

All tag attributes are well supported

The HTML5 video tag supports several attributes, which are currently well supported across various browsers and mobile devices. We tested the most important ones: poster, preload, autoplay and controls.

Mobile browsers ignore preload (video is never preloaded) and autoplay (video is never played upon page load). We believe this to be the correct approach, hence the N/A sign instead of a red cross.

Browser/Device Poster Preload AutoPlay Controls
Chrome Yes Yes Yes Yes
Firefox Yes Yes Yes Yes
Internet Explorer Yes Yes Yes Yes
Android Yes N/A N/A Yes
iOS Yes N/A N/A Yes
Safari Yes Yes Yes Yes
  Test Details Test Details Test Details Test Details

Note the design of the video controls in each browser is different, but all provide the same options: a play/pause toggle, a time slider, a volume slider and a fullscreen button. iOS/Android omit the volume slider in favour of hardware buttons.

4 JavaScript API

All browsers support a full API

In addition to its HTML attributes, the video tag provides an extensive JavaScript API for controlling its content. Common use cases for this are the rendering of custom controls (like JW Player does) or video-page interaction (like Popcorn.js does).

We found scripting to be reliable and consistent across the various desktop and mobile browsers. However, both iOS and Android have some limitations around setting the volume or scripted playback. We think these are fair, given the hardware buttons and battery constraints (hence the N/A).

Browser/Device Loading Playback Seeking Volume
Chrome Yes Yes Yes Yes
Firefox Yes Yes Yes Yes
Internet Explorer Yes Yes Yes Yes
Android Yes N/A Yes N/A
iOS Yes N/A Yes N/A
Safari Yes Yes Yes Yes
  Test Details Test Details Test Details Test Details

5 Fullscreen Playback

Soon fullscreen support will be ubiquitous

While a minor feature at first sight, fullscreen playback is essential to online video. It enhances the visual experience and increases viewer engagement. Although the W3C fullscreen API specification is still in draft, all browsers have released implementation. As Internet Explorer 11 gets fully adopted, support will be ubiquitous.

Both the iPad and Android devices support a fullscreen control, plus the (legacy) webkitEnterFullScreen() API. The iPhone only plays video in fullscreen, so a control is not needed.

Browser/Device Controlbar Webkit API W3C API
Chrome Yes N/A Yes
Firefox Yes N/A Yes
Internet Explorer Yes N/A Yes
Android Yes Yes No
iOS Yes Yes No
Safari Yes Yes Yes
  Test Details Test Details Test Details

Note the HTML5 Fullscreen API has several Security restrictions. For example, requestFullscreen() can only be used in direct response to a user action and is disabled by default inside iframes.

6 Text Tracks

Half the browsers support text tracks

The HTML5 <track> element and VTT file format are a great step forward for making online videos more accessible. Together, they not only add closed captions to videos, but also subtitles, descriptions, chapter markers & timed metadata.

All major desktop browsers now support HTML5 captioning. On the mobile side, Safari on iOS7 and Chrome on Android introduced support for text tracks. The more advanced features (like styling or dynamically creating tracks) are not supported everywhere yet, but new releases will likely fill those gaps.

Browser/Device Basic Captions WebVTT Styling Javascripting
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Internet Explorer Yes Yes Yes
Android No No No
iOS Yes Yes Yes
Safari Yes Yes Yes
  Test Details Test Details Test Details

Note we are advocating a sixth kind of text tracks: thumbnails, used for in-video previews around e.g. seeking, chaptering or edition.

7 Adaptive Streaming

iOS is the only platform with streaming

Adaptive streaming is a core component of online video. It enables buffer control, fast seeking, quality adjustments and live streaming. Content protection through media encryption is another main aspect of streaming protocols.

The Media Source Extension and Encrypted Media Extension are brand-new APIs for building adaptive streaming players. Only Chrome supports them to date (plus IE11 on Win8.1), but other browser vendors are working on it. On the mobile side, adaptive streaming (HLS) is built into the <video> element on both iOS and Android (beware, buggy!).

Browser/Device SME EME HLS
Chrome Yes Yes No
Firefox No No No
Internet Explorer No No No
Android No No Yes
iOS No No Yes
Safari No No Yes
  Test Details Test Details Test Details

Note that every HTML5 browser already supports seeking to not-yet-downloaded portions of the video by using HTTP 1.1 range-requests.