Video in websites

WARNING: This is a rather technical blog post. Maybe it won't interest many people. In fact, I'm totally unaware of the number of Antipodes readers who might be concerned by the construction of websites.

These days, to build websites (including those that can be viewed on an iPad), developers are encouraged to use HTML5. I've already mentioned the fact that I've started to play around with HTML5, to see how it feels from a developer's viewpoint. What I've done, for the moment, is to build a website that displays the following little movie (shot by Natacha last summer, and included here in its YouTube version):



To view this video in the context of my website, you'll need to use a modern browser such as Chrome, Firefox or Safari.

If you have such a browser, you can use this banner to access my website, and then click the VIDEOS button to display the movie. OK? Now, you might be saying to yourself: So what? Well, the rest of the present blog describes what is happening behind the scenes. If you're concerned by HTML5 development, then what I have to say might interest you greatly, because I have implemented a complete solution, which is not necessarily documented in an easily-accessible fashion. When I say "complete", what I mean is that you can view my included video either with Chrome, with Firefox or with Safari. (I apologize for making no attempt to propose a solution—if indeed this were feasible—that would work for people who persist in using an antiquated version of Internet Explorer, incapable of handling HTML5.)

To obtain this "complete solution", I've built three different versions of the video:

— For Safari, there's an H264 video file. This solution makes it possible to view my video on an iPad. For the moment, H264 seems to be the only format accepted by Apple.

— For Firefox, there's an Ogg video file. Normally, Firefox should be capable of handling Google's WebM format (which was recently accepted as a standard by the Free Software Foundation), but this doesn't seem to be the case yet.

— As for Google's powerful and elegant Chrome browser, it can accept either H264, Ogg or WebM.

To examine my code for the video tag, simply display the source code of the page with the movie.

Incidentally, when I speak of having built three different video files, I'm exaggerating a little. The original movie is an .mp4 file, fresh out of my camcorder and Final Cut Express. That's the version that works with the H264 codec. To obtain the Ogg and WebM versions, I used a delightful little free Mac app named Miro Video Converter.

Now, if you wish to understand all the HTML5 concepts behind this video stuff, then the perfect solution is this amazing online book created by a Google guru, Mark Pilgrim:

Normally, at this point, I should encourage my readers to shell out a few dollars to purchase a paper copy of Mark's excellent book…