&. |

Warning: I wrote this blog in 2011. That is a long time ago, especially on the internet. My opinions may have changed since then. Technological progress may have made this information completely obsolete. Proceed with caution.

I’ve supported HTML5 video on this site for something like a year now. I don’t think I have commented yet on just how much of a pain it is. This post isn’t a tutorial; other people have already written very good tutorials on HTML5 video. Don’t get me wrong—HTML5 video is a nice thing to have. The videos on this site can play on Flash-less devices like iPhone, iPad, and Android. For current versions of every desktop browser, the video plays nicely without the overhead of loading a Flash container. (And let’s face it, everyone hates Flash.¹.) And the syntax is backward-compatible, allowing older browsers to see a flash video player that newer browser will ignore. All-in-all, it’s pretty nice.

Except for the fact that I’m required to convert my video to 4.1 different formats! To play properly everywhere, the video has to be served in:

• MP4 - for Safari, iPhone/iPad, and Android
• OGV - for Firefox, Chrome, and Opera
• WebM - For IE9
• FLV - For flash player fallback in older browsers (IE 6/7/8 mainly)
• JPG - Okay, so this isn’t a video format, and it’s not required. But if you don’t pre-load your videos, you need a jpeg to use as the background letting the user know there is a video there they need to click on. (When I said I need 4.1 formats, this was the point one.)

This is pretty ridiculous. If the img tag didn’t already exist, and it were to be added as a new HTML5 element, the syntax would probably look something like this:

<img>
  <source src="/images/whatever/whatever.jpg" type="image/jpeg" /> <!-- for Chrome/Safari -->
  <source src="/images/whatever/whatever.gif" type="image/gif" /> <!-- for Opera -->
  <source src="/images/whatever/whatever.png" type="image/png" /> <!-- for Firefox -->
  <source src="/images/whatever/whatever.bmp" type="image/x-ms-bmp" /> <!-- for IE -->
</img>