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.
- 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)dvfiles. Evom has a setting called HTML5 that will create both MP4 and OGV files. - 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.
- The embed code is a little bit flexible, with parameters like “preload” and “autobuffer” seemingly being interchangeable. My current, working embed code looks like: ```
```
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.
