Quick notes on cross-browser HTML5 video

I’ve been doing some screencasts lately, and have wanted to post them as HTML5 videos in many cases. I also wanted to serve them from my Cloudfront CDN. This is not a how-to post, just some things I learned that I couldn’t find existing answers to. For an excellent primer, see Video On the Web from Dive Into HTML5.

I kept running into hurdles, whether it was the content-type of the file being served, or the OGV encoding not working in Firefox, weird sizing, slight variations in syntax, etc. So here are my notes on how I got from ScreenFlow to a cross-browser HTML5 video embed. They may not be of much use outside of that situation, but they might help somebody.

1. The only way I could get an OGV file that actually played in Firefox was to export from ScreenFlow in a DV format, and use Evom or ffmpeg2theora to convert. Note that Evom requires the file extension to be mov, as it doesn’t recognize (and won’t accept) dv files. Evom has a setting called HTML5 that will create both MP4 and OGV files.
2. Aside from writing my own Ruby scripts to handle the upload to my Amazon S3 account, Transmit is the only app I could find that would let me automatically set appropriate MIME headers on uploaded video files, and allow me to automatically make them public. I now have a Transmit droplet in Dropzone that will upload my files directly to the S3 bucket that my Cloudfront account uses, set their Content-Type to video/ogg and video/mp4, respectively, and make them public-readable.
3. The embed code is a little bit flexible, with parameters like “preload” and “autobuffer” seemingly being interchangeable. My current, working embed code looks like: <div markdown=0>

<video width="476" height="324" controls="" autobuffer="autobuffer">
  <source src="http://cdn.brettterpstra.com/media/TablinksDemo2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="http://cdn.brettterpstra.com/media/TablinksDemo2.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

</div>

With those steps in place, I’ve got video that plays (and looks decent) in Safari 5, Firefox 4 and Chrome. Obviously, I’d normally want a Flash fallback, but given that the videos I’m currently working on are about Safari 5, I’m not overly concerned whether Internet Explorer can see them or not. There’s always good-looking plugins like FlareVideo if that’s a requirement.