Embed Videos in Your Web Pages Using HTML5

Not only has a very public (and contentious) debate unfolded on the web about the efficacy of presenting videos using HTML5 instead of Flash, but momentum is gathering behind the nascent web standard.

From giant video sites like YouTube to Wikipedia, everyone it seems wants to get their video out of Flash and into native web formats. With Microsoft recently announcing it will support the HTML5 video tag in the coming Internet Explorer 9, expect even more sites to abandon Flash for native video.

So, you want in on the fun? Do you want to use some HTML5 video tags on your site right now? No problem. Fasten your seat belts, as were about to take a tour of the wonderful world of HTML5 video.

Browser Support for HTML5
First, lets deal with some very basic stuff, like where this will work and where it wont. As you can see in the table below, only the latest versions of most browsers support native video playback using HTML5s

HTML5
Fx 3.0 Fx 3.5 IE7 IE8 IE9 Safari 3 Safari 4 Chrome 3+ Opera 10.5
✓ ✓ ✓ ✓ ✓ ✓

Since Firefox 3.0 and IE 7 & 8 lack any support for HTML5 video, you'll have to come up with a fallback plan for serving video to those users. Depending on what you want to do you, could fallback first to Quicktime and then, failing that, to Flash. That's the strategy used in Video for Everyone.

To keep things simple were just going to fall straight from HTML5 to Flash.

Formats, Codecs and Technicalities
The next thing you need to understand is what is actually happening when you load and play a video file in your web browser. You're probably used to thinking of video as .mp4 or .mov files, but unfortunately its not that simple. The actual file formats are just containers. Think of them as a bit like a .zip file they hold other stuff inside.

Each container holds at minimum one video track and, most likely, one audio track. When you watch a movie online, your video player (most likely Flash) decodes both the audio and video and sends the information to your screen and speakers.

Why does this matter? Well, because the process of decoding whats inside the video container file varies. To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know which codec the movie was encoded with.

When it comes to web video there are two codecs to worry about: H.264 and Theora.

There's a huge debate right now among web developers, browser makers and just about everyone else as to which codec is right for the web. We believe that a free, open codec without patent and licensing restrictions is the best solution for the web. Sadly, neither codec exactly fulfills that dream, so for now, lets just skip the whole argument and be practical were going to use both codecs.

Why? Well, have a look at the table below, which shows which codecs work where and you'll quickly see that there is no one-size-fits-all-browsers solution. Only Google Chrome can play both H.264 and Theora.

Codec support by browser/platform:
Firefox Opera Chrome Safari IE 9 iPhone Android
Ogg
Theora ✓ ✓ ✓
H.264 ✓ ✓ ✓ ✓ ✓

So, you may be thinking if HTML5 video doesn't work in IE7 or IE8 and it means I'm going to have to encode my videos twice, then why bother at all? Well, the best answer is simple: mobile users. If you want iPhone and Android users to be able to see your video, HTML5 is the only way to do it Flash support is coming to Android sooner or later but for now HTML5 is the only option, and we all know Flash doesn't run on the iPhone or the iPad.

The HTML5 Code
Here's how to actually embed your videos. First, we encode video in both .ogv and .mp4 containers. Encoding video is beyond the scope of this article, so instead we suggest you check out Mark Pilgrims online book Dive Into HTML5, which has a whole chapter devoted to understanding video encoding. Pilgrims encoding suggestions use free software to get the job done, and in the end you'll have two files one .mp4 and one .ogv.

Now its time to unleash those movies in pure HTML glory. Here's the code: