I've been putting off writing this post for weeks because every time I start, I get annoyed all over again about codecs. But someone in the comments on my Ubuntu 11.10 rant asked how I got video working on my portfolio site without Flash, so here we are. Let's actually do this.
The pitch for <video> is simple: no plugin, no crashing tab, no little gray Lego-brick icon when the plugin isn't installed. Just a tag. Here's the bare minimum:
<video controls width="640" height="360">
<source src="clip.mp4" type="video/mp4">
<source src="clip.webm" type="video/webm">
<source src="clip.ogv" type="video/ogg">
Your browser doesn't support HTML5 video. <a href="clip.mp4">Download it instead</a>.
</video>
That's it. That's the whole tag. controls gives you a play button and a scrubber for free, which still feels like magic to me after years of hand-rolling Flash skins. No object/embed nesting, no swfobject.js, no wondering if the visitor even has Flash 10.3 installed.
Why three source files
This is the part that makes people give up halfway through. There's no single video format every browser agrees on, because of course there isn't. Roughly, as of right now:
- MP4 (H.264) plays in Safari, Chrome, and IE9 (with the right codec pack on some Windows installs).
- WebM plays in Chrome and Firefox 4+.
- Ogg Theora is the fallback for older Firefox before it picked up WebM support.
So you export three files. I use Handbrake for the MP4 and ffmpeg2theora for the Ogg one, and honestly the WebM export is the part that eats an evening because the tooling is still rough around the edges. The browser reads down your list of <source> tags in order and plays the first one it understands, so put your best-quality/most-compatible option first.
The fallback, and why you still need it
Here's the thing nobody tells you upfront: iOS and a bunch of older desktop browsers just don't do Flash reliably or at all (obviously the iPhone and iPad, but I've also got readers hitting my site on office machines running IE8 that IT will never, ever upgrade). So the content between your opening and closing <video> tags — anything after those <source> lines — is what shows up for browsers that don't support the tag at all. That's your safety net. I just drop in a direct download link and a sentence telling people what they're missing. No sense getting fancy with a Flash-based fallback player at this point; if a browser can't do <video>, it's old enough that I'd rather just hand over the file.
Autoplay: don't
Quick aside because it drives me up the wall: I was testing a client site last week and their homepage had autoplay on a video with audio, and it just started blaring at 40% volume the second the page loaded in my cubicle at 9am. My officemate looked over like I'd set off a fire alarm. Don't do this. If you must autoplay something, mute it, and honestly just don't autoplay at all unless the whole point of the page is that one video.
Poster images matter more than you'd think
<video controls poster="thumbnail.jpg" width="640" height="360">
Without a poster, you get either a black rectangle or (in some browsers) the first frame, which is almost never the frame you'd actually pick to represent the video. Takes ten seconds to add and makes the whole embed look intentional instead of like you forgot a step.
What I actually shipped
On my portfolio I ended up doing MP4 + WebM only and skipping Ogg, because my traffic logs show basically nobody running an old enough Firefox to need it anymore, and the two-file version cuts my encoding time in half. Your numbers might differ. Check your analytics before you commit to exporting a third file nobody will ever load.
One last thing: JW Player and other Flash-based players still make sense if you need proper analytics, ad insertion, or you're targeting a big pile of IE8/IE9 traffic without native codec support. This isn't a "Flash is dead" post. It's just that for a personal site, a portfolio, a quick embedded clip, the plain <video> tag does the job with way less code, and that's a trade I'll take every time.