It Shouldn’t Take a Genius

Kroc Camen posts up a slice of code to utilize the new HTML 5 video tag with graceful degradation for browsers that don’t support HTML 5 video yet:

Video for Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 video element which offers native playback in Firefox 3.5 and Safari 3 & 4.


In other browsers that do not support video, it falls back to Adobe Flash:


If Flash is not installed, QuickTime is used:


If QuickTime is not installed then Windows Media Player is used in Internet Explorer for Windows Vista and above. This means that it is actually almost impossible for the video to not play in IE on Vista / Windows 7. Even without Flash and QuickTime, you’d have to disable Windows Media Player or all ActiveX entirely!


Finally, if all else fails, a warning is issued that provides links to download the video, and links to software relevant to getting the video to play within the browser itself. Since this is just HTML, you can put anything here you want.


This is all done without JavaScript and requires only two video encodes, one OGG file for Firefox 3.5, and one MP4 file for everything else (Flash / Safari / iPhone). Instructions on how to convert your videos to these formats with the correct settings are provided further down this article.

There are example screenshots and sample code to show you how to accomplish this on your own site.

This is a perfect example of exactly what is wrong with the Web. You shouldn’t have to create two separate video encodings, upload them, make sure your server is using the correct MIME-types for the videos in question, and insert twenty-three lines of HTML code in order to get video to play well in a browser and with as full compatibility as you can muster.

I understand from looking at the various articles and back-and-forth going on right now that the browser vendors are unwilling to come to terms on a video standard for using the video tag. That’s kind of to be expected (as is the fact that Microsoft apparently isn’t even showing up at the negotiations). Apple in particular has a pretty decent stake in pushing h.264. I highly doubt Theora is the future. Flash has basically emerged as the de facto video standard in the past few years, largely because of YouTube and similar services.

This is just way too difficult. I don’t know what the solution is, but I know that both at work and at home I’ve decided to use YouTube for just about everything video that I post on a site because it’s the closest thing to simplicity that exists right now. It’s relatively easy to get something up on the service, it takes HD (and as of today, a 2GB max), and videos on the service are automatically converted to h.264 for viewing on the iPhone because of YouTube’s working with Apple to make it so. It’s still harder than it should be to embed the videos in a page (especially since no decent plugins exist for self-hosted WordPress that are in active development), but at least it covers most of the bases you need to get a video working in someone’s Web browser.

I do agree with him that the impending problem with getting video in browsers is that of handheld devices. iPhone has had great success with YouTube, but other services don’t work with iPhone and it’s likely that as the number of handheld devices increases, the video solutions are only going to become more complex.

(Link via Daring Fireball. Photo credit: one less tv by flickr user Kevin Steele.)

2 comments on “It Shouldn’t Take a Genius

Comment navigation

  1. Well, it's a start anyway. At least the video and audio tags in HTML5 exist and are going to be supported by the major browsers, even if they can't agree on a format yet. Still, that's not as bad as still having to cope with IE8 not having the video tag supported at all. The format war will eventually be resolved (probably by having both major browsers support both formats, in the long run), and by the time that's over, IE9 might be out and we'll all be griping about it not supporting something else.

    1. Yup. I had been wondering what Microsoft was going to do with regards to the video tag, given that they now have Silverlight as a platform to "protect" and would definitely like a slice of the online video pie from Adobe.

      It's frustrating that the Web and HTML/XHTML has managed to mature to the point where now (with IE8… mostly) there's a pretty standard interpretation of the code in most browsers without having to do a whole lot of extra work—and now this feels like a step backwards.

Comments are closed.