Help
(Updated 3/22/10 with instructions for getting native HTML5 video to play in Firefox.)
Ever since I ran across this example of HTML5 video, I've wanted to tinker with my own variation. This recently released project and tutorial made that possible.
Here are the steps I took to get an HTML5-based video on my own website:
1. I saved a sample video as an MP4 file. I also found that M4V files will work for this as well.
2. I uploaded the video file to my personal web server. For testing purposes, I suggest you use a small video clip; no need to sit around while a massive file slowly uploads.
3. I copied this bit of code to my clipboard:
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js">
4. I logged in to my content management system (Movable Type) and pasted the code before the closing "/head" tag in a template file. You could do the same thing with a static HTML file. Just make sure the "script" element is contained within the "head" area.
5. Finally, I created a post in Movable Type and inserted the following tag and attributes:
<video src="/video/running-emus.mp4" width="480" height="360" controls autobuffer></video>
This is basically an image tag that inserts a video instead of a JPG, GIF or PNG file.
All told, the process took about 15 minutes to fully implement. Here's my test video in action.
The many caveatsHTML5 video has limitations. It doesn't work on all browsers (see the table below). It also lacks the built-in sharing mechanisms we've come to expect from Flash-based videos. You'd have to use an absolute SRC call to post videos on external sites, and that raises all sorts of bandwidth issues.
That said, HTML5 has one big thing going for it: it's not a plugin. Despite being around for years, plugins are at best a stop-gap measure. I shouldn't have to install an external product -- even one as ubiquitous as Flash -- to see basic web content.
HTML5 video browser testing
I tested my HTML5 video in a variety of OS/browser configurations. Here's what worked and what didn't.
| OS | Browser | Works | Doesn't work |
| Mac 10.6.2 | Firefox 3.6 | * | |
| Mac 10.6.2 | Safari 4.0.4 | X | |
| Mac 10.6.2 | Chrome 5.0.307.11 beta | X | |
| Mac 10.6.2 | Opera 10.10 | * | |
| Mac 10.5.8 | Firefox 3.6 | * | |
| Mac 10.5.8 | Safari 4.0.4 | X | |
| Mac 10.5.8 | Chrome 5.0.307.11 beta | X | |
| Mac 10.5.8 | Opera 10.10 | * | |
| Windows 7 | Internet Explorer 8 | X | |
| Windows 7 | Firefox 3.6 | * | |
| Windows 7 | Safari 4.0.4 | X | |
| Windows 7 | Chrome 4.0.249.89 | X | |
| Windows 7 | Opera 10.5 | * | |
| Win XP with SP3 | Internet Explorer 7 | X | |
| Win XP with SP3 | Firefox 3.6 | * | |
| Win XP with SP3 | Safari 4.0.4 | X | |
| Win XP with SP3 | Chrome 4.0.249.89 | X | |
| Win XP with SP3 | Opera 10.5 | * |
* Defaults to the open source Flowplayer. If you don't want Firefox to default to FlowPlayer, you can convert your video to the natively supported Ogg Theora format with the free Micro Video Converter application. You'll then need to insert an extended video tag into your HTML document. Depending on your server configuration, you might also need to edit your .htaccess file. (Not really elegant, I know.) More information on the Theora process is available here under the "What about Theora?" section.
Note: The Chrome Frame can make HTML5 videos run in Internet Explorer, but that's the same type of plugin solution I want to avoid.
I tested the same video on three mobile browsers:
| Mobile OS | Browser | Works | Doesn't work |
| iPod Touch 3.1.3 | Safari** | X | |
| iPad | Safari*** | X | |
| Android 2.0.1 (Droid) | Default browser | X | |
| Android 2.0.1 (Droid) | Dolphin Browser | X | |
| Android 2.0.1 (Droid) | Opera Mini 5 beta | X |
** The video plays in the iPod Touch's separate video application. It doesn't play within the web page.
*** The iPad plays the video within the web page.
