Using HTML5 Video

In order to deliver video to all devices (Desktop, mobile, tablet), that is not served from a 3rd party like Youtube or Vimeo, we need to use the HTML5 <video>  element.

The trouble is, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. In order to deliver video to Firefox 4+, Safari4+, Chome11+ and IE9+, we need 2 video formats (.mp4 and .ogg) and 2 video players (HTML5 and Flash).

.mp4

This makes Safari/Chrome happy (iOS devices as well). Make sure it’s encoded using H.246, which is the important part.

.ogg

This makes Firefox Happy, but only if the file is served by the server with the “video/ogg” mime type, which is not usually a part of the standard configuration. Add the mime type to .htaccess for this.

Video Players (HTML5 Video, Flash)

Not all browsers support HTML 5 video, of course. To compensate, I use “Flowplayer“, a fallback Flash version, that uses the .mp4 encoded file. The Flash player is used for all browsers that don’t recognize the <video> element.

The final problem is that we can’t just use .mp4 for the iOS devices and fall back to Flash for Firefox, because Firefox understands the video element, looks for a src it can read and just sits if it doesn’t find one. It won’t use the fallback.

Solution

1. Make one version that uses Theora video and Vorbis audio in an Ogg container.
2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container. (This version will also work in the Flash Player for IE and older browsers.)

Create the .ogg version

1. Use ffmpeg2theora (it’s a command line encoder) to convert the video.
2. My command was as follows:
   ffmpeg2theora -v 7 --soft-target -V 2500 -x 1024 -y 432 -a 5 /Users/ben/Trailer.mov
   (Just type ffmpeg2theora at the command line for help with the params)

Create the .mp4 version

1. Use Handbrake with the “Apple > Universal” preset. The iPad has certain limitations about what type of video settings should be used. See also this article at stackoverflow.
2. Change the extension .mp4 (It’s exactly the same internals as .m4v, but for some reason it’s the standard extension) More here.
3. Check the “Web optimized” checkbox under “Output Settings” just below.
4. Process the video.

HTML

I’m using Video for Everybody and videojs to format the HTML5 player with a Flash (Flowplayer) fallback.