Webvanta Blog: Creating Effective Websites

HTML5 Video:
Get Used to Multiple Formats

HTML5 Video:<br />Get Used to Multiple Formats Image

Video on the web is a mess.

Web standards have never fully embraced video. Until HTML5, there was no video element, so the only way to play video was to depend on platform-specific software (such as Quicktime or Windows Media Player) that may or may not be present on any particular computer, or to use Flash.

Flash has become the predominant solution because it is the only one that works on the vast majority of computers and provides a consistent user experience. Because Flash includes a few video codecs, you can post video on the web and know that most browsers will be able to play it, since 99% of Internet-enabled PCs have Flash installed. Flash also makes a good tool for creating the player interactions (play, pause, scrub, etc.).

Take a look at virtually any video sharing site, or any business site that incorporates video, and right-click on the video. Almost all of the time, you’ll see that the video is playing through Flash.

Making Video a Web Standard

Using Flash to play video has worked pretty well, but it has one big flaw: Flash is a proprietary plug-in, not a part of web standards or built in to browsers. As a practical matter, this is not necessarily a big deal; but in terms of fitting in with the charter of web standards groups, it is an enormous problem. And one large company, named after a fruit, also has made it a big issue.

In designing HTML5, the web standards community naturally wanted to bring video into the standards fold, so they added a <video> tag. If one or more codecs could be specified as part of the standards, and built into all browsers, then video could become shown without any plug-ins or platform-specific software.

Alas, the major browser makers have been unable to agree on a single codec. Although earlier drafts of the HTML5 specification required a particular codec (Ogg/Theora), it was removed from the spec in mid-2009.

Apple likes MPEG-4/H.264, but Mozilla will have nothing to do with it because it is not openly licensed and is protected by patents. Mozilla likes Ogg/Theora, which is open-source and not encumbered by patents, but Apple won’t support it. Steve Jobs has said Apple is concerned about the potential for patent holders popping up when there is a deep pocket to sue, but the bigger issue here may be that H.264 performs better and Apple already has invested in it heavily. Google is backing WebM/VP8, which Firefox supports and Microsoft may support as well—but Apple has said it will not support it.

Technical aside: it is not just codecs that need to be specified, but also container formats. For example, Ogg (.ogv) is a container format that is typically used with the Theora video codec and Vorbis audio codec. MPEG 4 (.mp4) is a container format that can be used to wrap H.264-encoded video. And there’s also the WebM container format and VP8 video codec, backed by Google. The Flash Video (.flv) container supports H.264 as well as Sorenson Spark and VP6. We’ll save the details of video codecs and containers for another day; for the purposes of this discussion, you just need to know that there’s a profusion of them.

Apple Forces HTML5 Video to the Forefront

Given this mess, combined with the fact that Internet Explorer currently supports no HTML5 video at all, you might think that HTML5 video would be of little interest today except for standards authors and browser makers who are trying to figure out what comes next. And you would be right, except for one thing: Apple’s refusal to support Flash on the iPhone and iPad.

By supporting HTML5 video and banning Flash on these devices, Apple has elevated HTML5 video to immediate importance. If you want your video to play on any of the millions of iPads or tens of millions of iPhones, you need to use HTML5.

Video That Plays Everywhere

Let’s assume you want the video on your web page to play nearly anywhere: on any recent browser, on iPads and iPhones, maybe even on other mobile phones. Which approach do you use?

All of them. You’re going to need to encode your video into at least three formats, and provide code for at least two players, to achieve this goal:

  • For the iPad and iPhone, you need HTML5 video encoded with the H.264 codec. This will cover the desktop versions of Safari as well.
  • For Firefox and Chrome, you can use HTML5 video, but not H.264; you’ll need to encode the video with Ogg/Theora. Or you can just depend on Flash.
  • For Internet Explorer, for now you’re stuck with Flash. When IE 9 is released, it will have H.264 HTML5 video support.

So much for standardization.

Eventually, the patents related to H.264 will expire, and this format may become pervasive. Until then, get used to providing video in multiple formats.

For More Information

Topics: HTML5 and CSS3

Add Your Comments

(not published)