By John Gruber
Flow: Animate Sketch designs in seconds and export production-ready code.
To use the HTML 5
<video> tag in Firefox 3.5, you need video files encoded in the Ogg Theora format. Apple doesn’t support this format at all, so you can’t just export Ogg files from QuickTime like you can with H.264/MPEG-4. I spent some time trying to find the best easy way to create Ogg Theora files on Mac OS X, and I think ffmpeg2theora is it.
In his “Video for Everybody” article I linked to yesterday, Kroc Camen suggests using HandBrake to create Ogg Theora files, but I couldn’t get it to work in HandBrake 0.9.3 (the current release version) without crashing. (Well, one time it created a file without crashing, but the file was corrupt.) It ends up that HandBrake’s broken Ogg support is a known issue with no easy solution, and so Ogg support has been removed from the current branch of HandBrake, and there are no plans to bring it back.
Camen also linked to Xiph, an open-source QuickTime component that adds Ogg Theora playback and export to QuickTime. I don’t want to install this, however. For one thing, the only open-source QuickTime component I’ve ever had a good experience with is Perian. For another, I don’t want Ogg playback support in QuickTime. The fork in supported codecs for the
<video> tag — Safari won’t support Ogg Theora and Firefox and Opera won’t support H.264 — doesn’t mean you can’t support all three browsers. It just means that to support all three, you need to include at least two
<source> elements within the
<video> tag, one pointing to an H.264-encoded file, the other to an Ogg Theora file, like this:
<video> <source src="example-video.mp4" type="video/mp4" /> <source src="example-video.ogv" type="video/ogg" /> </video>
This serves the H.264 to Safari, the Ogg Theora to Firefox. And for Chrome 3.0, which supports both formats, this should serve the H.264 version because it’s specified first.
ffmpeg2theora is the one tool I found that simply just works for transcoding to Ogg Theora. The downside to ffmpeg2theora is that it’s only available as a command-line tool. But:
It has a nice Mac OS X .pkg installer. Launch it, authorize it with admin credentials, and it’ll install the
ffmpeg2theora tool in /usr/local/bin/.
The command-line syntax could not be simpler. You just type:
and it gets to work, outputting a file named example.ogv right next to the .m4v file. It shows an updating progress message in Terminal while it’s working. There are more options (and it comes with a man page that documents them), but in my testing you can just use the defaults.
ffmpeg2theora’s output looks good. I gave it a 3.9 MB H.264 file as input, and it created a 3.5 MB .ogv file that looked pretty good — way better than typical web video in a Flash player — when I played it back in VLC and Firefox 3.5.