Jump to content

How to Include Video in HTML5

+ 3
  chco's Photo
Posted Aug 19 2010 07:27 AM

This excerpt from HTML5: Up and Running explains the use of video in HTML5, detailing the differences of what browser supports what format.
There are no restrictions on the video codec, audio codec, or container format you can use for your video. One <video> element can link to multiple video files, and the browser will choose the first video file it can actually play. It is up to you to know which browsers support which containers and codecs.

As of this writing, this is the landscape of HTML5 video:

  • Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.

  • Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container.

  • Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. It also supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.

  • As of this writing (June 9, 2010), the “dev channel” of Google Chrome, nightly builds of Chromium, nightly builds of Mozilla Firefox, and experimental builds of Opera all support VP8 video and Vorbis audio in a WebM container. (Visit webmproject.org for more up-to-date information and download links for WebM-compatible browsers.)

  • Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plug-ins. In practice, very 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 Theora video, Vorbis audio, or the Ogg container. However, QuickTime does support H.264 video (Main profile) and AAC audio in an MP4 container.

  • Mobile devices like Apple’s iPhone and Google Android phones support H.264 video (Baseline profile) and AAC audio (low-complexity profile) in an MP4 container.

  • Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.

  • Internet Explorer 9 will support some as-yet-unspecified profiles of H.264 video and AAC audio in an MP4 container.

  • Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plug-in. Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash.


Table 5-2 provides the above information in an easier-to-digest form.

Table 5-2. Video codec support in shipping browsers

Codecs/ContainerIEFirefoxSafariChromeOperaiPhoneAndroid
Theora+Vorbis+Ogg.3.5+.5.0+10.5+..
H.264+AAC+MP4..3.0+5.0+.3.0+2.0+
WebM.......


A year from now, the landscape will look significantly different: WebM will be implemented in multiple browsers, those browsers will ship nonexperimental WebM-enabled versions, and users will upgrade to those new versions. The anticipated codec support is shown in Table 5-3.

Table 5-3. Video codec support in upcoming browsers

Codecs/ContainerIEFirefoxSafariChromeOperaiPhoneAndroid
Theora+Vorbis+Ogg.3.5+.5.0+10.5+..
H.264+AAC+MP4..3.0+5.0+.3.0+2.0+
WebM9.0+ [13]4.0+.6.0+11.0+.[14]


[13] Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”, which implies that Microsoft will not be shipping the codec itself.

[14] Google has committed to supporting WebM “in a future release” of Android, but there’s no firm timeline yet.


And now for the knockout punch....

Professor Markup Says


There is no single combination of containers and codecs that works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.


For maximum compatibility, here’s what your video workflow will look like:

  • Make one version that uses Theora video and Vorbis audio in an Ogg container.

  • Make another version that uses WebM (VP8 + Vorbis).

  • Make another version that uses H.264 Baseline video and AAC low-complexity audio in an MP4 container.

  • Link to all three video files from a single <video> element, and fall back to a Flash-based video player.


HTML5: Up and Running

Learn more about this topic from HTML5: Up and Running.

If you don't know about the new features available in HTML5, now's the time to find out. This book provides practical information about how and why the latest version of this markup language will significantly change the way you develop for the Web. HTML5: Up & Running carefully guides you though the important changes in this version with lots of hands-on examples, including markup, graphics, and screenshots. You'll learn how to use HTML5 markup to add video, offline capabilities, and more -- and you’ll be able to put that functionality to work right away.

See what you'll learn


Tags:
0 Subscribe


0 Replies