HTML5

Home HTML5

HTML5

On October 28, 2014 the W3C ratified HTML5 video formats as a web standard. This came after nearly 10 years of work that was started by the Web Hypertext Application Technology Working Group (WHATWG) to update HTML4 which had not been updated since 2000. Despite lack of ratification by the W3C HTML5 has been widely embraced by the web development community. The catalyst for adoption of HTML5 video formats came in April of 2010 when Steve Jobs released his highly critical Thoughts on Flash. This was the first of many nails in Flash’s coffin. When HTML5 was ratified last year, a core component was support for video. Paul Cotten who leads the HTML5 Working Group at the W3C announced “The single most important feature of HTML5 is probably the < video > tag since today’s web is rapidly moving to being more about video.” Ericcson recently claimed that by 2020, that 60 percent of all web traffic globally would be video.

Where is HTML5 Video

The big differentiation between Flash video and HTML5 video formats is that Flash requires a proprietary plugin, made by Adobe. The only thing that HTML5 video needs is a browser that supports the < video > tag element. Beyond browser support all you need is a source, its controls, its dimensions (height x width), and a poster image. With the shift of support from a plug-in to the browser, the browser became the determining factor in supporting formats for the video source. With the embattled browser landscape this created a little bit of chaos. Initially, the open source browsers, Chrome, Firefox, and Opera all went with the WebM format which is royalty free. Safari, Internet Explorer, & Chrome supported the widely accepted, but not royalty free mp4 format. Over time this has changed and now all major browsers provide support for the MP4 format. The MP4 format is licensed through MPEG LA. CanIUse.com publishes the most up-to-date information on HTML5 video browser compatibility.

The key difference between Flash video and HTML5 video formats is that Flash requires the use of a Adobe’s Flash plugin which is not open source. In contrast, the only thing required to make HTML5 video work is a supporting browser, player controls, video dimensions, and a poster image. Since a plugin isn’t required, the browser become the delimiting factor in HTML5 video playback. Because browsers are so fragmented things were chaotic at first. The open source players (Chrome, Firefox, Opera) used the royalty-free WebM format. Safari, IE, & Chrome supported the ubiquitous but costly MP4 format. Now that HTML5 is nearing maturity, there is support for HTML5 video and their associated formats and technologies.

wdt_ID	Browser	Chrome	Firefox	Internet Explorer	Safari	iPhone	Android	Opera	Chrome Android
1	Version	3.0+	3.5+	9.0+	3.0+	1.0+	2.0+	10.5+	42+

Supported Audio/Video Formats

wdt_ID	Browser	Chrome	Firefox	Internet Explorer	Safari	iPhone	Android	Opera	Chrome Android
1	Video	WebM, MP4, Theora		MP4	MP4	MP4	WebM, MP4	WebM, MP4, Theora	WebM, MP4
2	Audio	WAV, MP3, Vorbis, AAC	WAV, MP3, Vorbis, AAC	WAV, MP3, AAC	WAV, MP3, AAC	WAV, MP3, AAC	WAV, MP3, Vorbis, AAC	WAV, MP3, Vorbis, AAC	WAV, MP3, Vorbis, AAC

Supported Audio/Video Codecs

Historically, the fragmented device and browser landscape has caused divided support for video codecs. Some supported H.264, others VP8 (AKA WebM). This was addressed by Mozilla when the launched H.264 for all the major browsers. On the contrary, modern codecs are more fragmented VP9 (open source) has broad support, but HEVC (licensed) does not.

wdt_ID	Browser	Chrome	Firefox	Internet Explorer	Safari	iPhone	Android	Opera	Chrome Android
1	Video Codec	H.264, VP8, VP9	H.264, VP8, VP9	H.264	H.264	H.264	H.264, VP8	H.264, VP8	H.264, VP8, VP9
2	Audio Codec	AAC, MP3, Vorbis, Opus	AAC, MP3, Vorbis, Opus	MP3	MP3, AAC	MP3, AAC	MP3, AAC, Vorbis	Vorbis, Opus	MP3, AAC, Vorbis

Important Notes About HTML5 Codec Support

Firefox 3.5+ supports Theora video and Vorbis audio in an Ogg container. Firefox 4+ also supports WebM.

Opera 10.5+ supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 (and later) also supports WebM. Firefox now supports MP4 as well.

Chrome 4.0+ supports H.264, Theora video and Vorbis audio in an Ogg container. Chrome 6.0+ also supports WebM.

Safari on Macs and Windows PCs 3.0+ will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.

Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) , but Android overall has partial support with 2.1+.

Internet Explorer 9+ supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).

Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin.

In recent news, it was announced that IE 11/Windows 8.1 will no longer require an audio/video plug-in utilizing HTML5.

Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”.

Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats.

Google Chrome promised to drop support for H.264 in 2011, but it has yet to happen.

Our HTML video converter can help you encode web supported videos.

HTML5 Video Tag Attributes

There are several attributes for the HTML5 video tag. They include poster image, controls, pre-loading, autoplay, loop, and mute. All browsers support controls and posters. Pre-loading, however, does not work on mobile browsers, and some mobile browsers don’t support autoplay, loop, or mute.

wdt_ID	Browser	Chrome	Firefox	Internet Explorer	Safari	Android	Opera	iPhone	Chrome Android
1	Poster	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
2	Preload	Yes	Yes	Yes	Yes	No	Yes	No	No
3	Autoplay	Yes	Yes	Yes	Yes	No	Yes	No	No
4	Controls	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes

WebVTT Browser Support

Accessibility mandates by the federal government for closed captioning have become quite comprehensive and have grown to includes requirements for captioning of online content. Every major browser now supports WebVTT captioning, styling, and scripting, but there are still inconsistencies in support. Firefox has control and styling limitations. Internet Explorer has styling limitations. A lot of these consistencies are because the WebVTT standard is still in draft and has not been ratified.

wdt_ID	Browser	Chrome	Firefox	Internet Explorer	Safari	iPhone	Android	Opera	Chrome Android
1	WebVTT Support	Yes	Yes	Partial	Yes	Yes	No	Yes	Yes

Adaptive Playback HTTP Live Streaming

While Adaptive Streaming, specifically HTTP-Live-Streaming, has become the de facto standard for on-demand delivery of video to mobile, tablet, and OTT markets, it still lags behind when it comes to desktop browsers. With the rise of HLS has come the need to secure these adaptive streams. Media Source Extensions and Encrypted Media Extensions are APIs that have been created to develop applications that support the encryption of adaptive streams. While broad support exists for these extensions, there are still limitations. Only recently has Apple released details for their FairPlay DRM scheme so support for iOS and AppleTV is just being seen in apps. ID3 tags which track viewship across devices are not supported by any browser, necessitating a third-party player JWplayer.

wdt_ID	Browser	Chrome	Firefox	Internet Explorer	Safari	iPhone	Android	Opera	Chrome Android
1	HLS	No	No	No	Yes	Yes	Yes	No	Yes
2	AES	No	No	Yes	Yes	Yes	Yes	No	Yes
3	EME	Yes	No	Yes	No	No	No	No	Yes
4	ID3	No	No	No	No	No	No	No	No

For more information on our HTML5 video converter, contact us today!

HTML5

HTML5

Where is HTML5 Video

Supported Audio/Video Formats

Supported Audio/Video Codecs

Important Notes About HTML5 Codec Support

HTML5 Video Tag Attributes

WebVTT Browser Support

Adaptive Playback HTTP Live Streaming

Encoding.com

Help Center

Recent Posts

Dolby Vision Processing in the Cloud

Free Up Network Bandwidth by Reducing Streaming Video Bitrates without Impacting Video Quality