A humble suggestion for HTML5 video

This is an embedded Flash video from latakoo Flight:

If you’re viewing this post on an iOS device, or anywhere else where Flash isn’t supported, you’re not going to see the video. I’d dearly love to use the HTML5 video tag, which iOS devices do support, but I can’t – at least not without some extra work.

Here’s what the HTML 5 video tag looks like:

<video src="video_location" type="video_type">

	Some fallback content if the browser doesn't support the video tag

</video>

WebKit browsers – those on iOS devices, Chrome and Safari – play H.264 MPEG-4 files natively, as does Internet Explorer 9. Firefox and Opera, meanwhile, play videos stored in the open source OGG format. As it happens, I only have an H.264 MPEG-4 copy of my video, but that’s okay, right? Because we’ve specified the <video> tag’s type attribute, Firefox and Opera will understand that they can’t play it, and they’ll use the fallback content!

Wrong.

What actually happens is that the user sees a great big “X” indicating that the video has failed. The only way to use the HTML5 video tag in this way is to either provide multiple versions of the videos encoded with multiple codecs, or to use JavaScript to selectively decide whether to use the Flash or HTML5 video player depending on what kind of video we have. The latter case would be fine, but I want my videos to be embeddable, like I’ve done here.

So in reality, what I need to do is provide an <iframe> tag that in turn loads a page containing a bunch of JavaScript that controls video playback. Yep, we’re using frames for content, just like in 1996. This isn’t a minority kludge; this is what YouTube does. (It’s also what latakoo Flight will do when we make our video embedding public, very shortly.)

May I suggest another way?

It seems to me that the browser should fall back whenever it can’t play the video. That includes when the codec is mismatched, or when there are connectivity issues. The fallback content can contain a Flash player, and of course, Flash embed HTML also contains a fallback for when it doesn’t work. The result is the HTML equivalent of this nested if statement:

if (the browser can play the video) {

	show HTML5 video player;

} else if (we have Flash installed) {

	show the Flash player;

} else {

	show HTML5 fallback content;

}

This would help clean up the mess caused by web video’s current codec issues, and ensure that the user always sees something sensible. Unlike the kludgey situation we have today.