HTML5 video tag formats

* 4 Comments

If you’ve played with the new video element in HTML5, you’re probably noticing the power it has to release you of the flash-based bonds you’ve been held captive by. But if you’re running an older browser (anything prior to IE 9 according to this site), you’ll see a supreme lack of video playing in your browser. You’ll need to provide a flash fallback using something like MediaElement.js or Video for Everybody.

Assuming you have fixed your video tag for older browsers, here’s a breakdown of the 3 different video formats you can use with the HTML5 video element.

WebM/VP8

Quoting the WebM Project site, “The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.” Nothing more really needs to be said about which direction we should heading for video on the web. And again from their site, “WebM is supported by Mozilla, Opera, Adobe, Google and more than seventy other publishers and software and hardware vendors.” I wonder which video format will rise to the top?!

Ogg/Theora

This format is also an open source codec designed to compete with MPEG-4 and other proprietary codecs (Windows Media, Realmedia, etc.). I don’t have tons of experience with it, but it only seems to have a couple of percentage points up on the WebM format in terms of current usage support. Right now it supports all the same browsers. So I put it in just for the heck of it, but you might be able to get by without it.

MPEG-4/H.264

The licensing on MPEG-4 is not royalty-free, so many browsers won’t support this format. Keep in mind that if you’re using all 3 formats (suggested), you need to list this one first because of a bug with the iPad. Also, Firefox and Opera have both stated they won’t support this format. Chrome currently does, but it seems it won’t in upcoming versions. This format is a ticking clock because of its closed door policy. Yes, it’s nice. But its days are numbered.

If you need software to be able to convert quickly and easily to all of these formats, check out Miro Video Converter. It’s an awesome (lightweight) tool.

ps. Have you tried the YouTube HTML5 version? They’ll let you sign up for a trial to see how it’s working for you.


Centered Divs in IE8, IE9

Are your centered divs not working in IE8 or IE9? Just make sure this is at the top of your document:

<!doctype html>

Sharepoint Scrolling broken in IE9

As far as I can tell, the only way to re-enable scrolling in IE9 is to add your site to your list of trusted sites. I’m sure there’s an actual compatibility issue to fix somewhere, but this seems to do the trick. Anyone have any other suggestions?