Browser Support for HTML5
First, let’s deal with some very basic stuff, like where this will work and where it won’t. As you can see in the table below, only the latest versions of most browsers support native video playback using HTML5′s <video> tag.
| 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.
| 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 Pilgrim’s online book Dive Into HTML5, which has a whole chapter devoted to understanding video encoding. Pilgrim’s 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 it’s time to unleash those movies in pure HTML glory. Here’s the code:
<video width="560" height="340" controls> <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'> <object width="640" height="384" type="application/x-shockwave-flash" data="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4"> <param name="movie" value="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4" /> </object> </video>
Yes, that’s it. What we’ve done here is use the <video> tag to specify the dimensions of our video, and to denote that we want to use the browser’s default controls. Then, within the video tag, we’ve added two<source> elements which link to our video files.
Dealing With Everyone Else
What about IE7, IE8 and older versions of just about any other browser? Well, for those users, we’ll fall back on Flash. To do that, we just use an <embed> tag within our video tag:
<video width="560" height="340" controls> <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'> <object width="640" height="384" type="application/x-shockwave-flash" data="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4"> <param name="movie" value="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4" /> </object> </video>
