Oh HTML5 Video tag, how you disappoint me

I remember when I first got word about the HTML5 video tag, i thought “This is gonna be the best thing ever”, simplifying things. Not having to use Flash players that never look or act like you want them to, JavaScript to embed nicely etc and what not. It’s gonna be like:

<video src="file.mp4" />

And I’d be done for the day, right? But nooooo, browser developers won’t have it. Oh no, they’re not about to make anything that simple for ya sonny. They’re gonna go ahead and disagree on the freaking containers and codecs, and not only kill what could be one of the best thing about it – one simple line of embed code nativly supported by your browser. They’re also gonna make sure you have to quadruple the storage usage on your server. Yep. So here’s what we end up with instead:

<video poster="file.jpg">
	<source src="file.mp4"
		type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<source src="file.mov"
		type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<source src="file.webm"
		type='video/webm; codecs="vp8, vorbis"'>
	<source src="file.ogv"
		type='video/ogg; codecs="theora, vorbis"'>
	<object id="player"
		type="application/x-shockwave-flash" data="player.swf"
		name="player" width="580" height="350">
		<param name="movie" value="player.swf" />
		<param name="allowfullscreen" value="true" />
		<param name="allowscriptaccess" value="always" />
		<param name="flashvars" value="file=file.mp4&image=file.jpg" />
		<embed id="player2"
			type="application/x-shockwave-flash" src="player.swf"
			width="580" height="350" allowscriptaccess="always"
			allowfullscreen="true" flashvars="file=file.mp4&image=file.jpg" />
	</object>
</video>

OK, not super fair, there is some extra code in there, but you get the point. One of these extras are the poster attribute. This attribute is according to Camendesign.com breaking playback on iPads and iPhone OS 3.x, so mind that. In that article I also read that the .mp4 file must come first, because the iPad will ignore anything but the first source element.

Above we’ve got the .mp4 tag for Safari, the .webm for Google Chrome, .ogv for Mozilla Firefox, and the .mov for iPhones. The iPhone version uses the .mov as a reference movie, selecting between two additional versions of the video files. One if you’re on 3G/EDGE, and one if you’re on WiFi. SIX video files! Actually, the reference movie is only a few k’s heavy, since it doesn’t actually contain any video. And you could use the same .mp4 video file for both Safari and mobile devices on WiFi speeds. I decided to place the .mov reference movie second because I imagine it might save iPhone users some loading time, but I honestly have no idea if it has any effect at all. Hopefully the iPhone stops evaluating sources when it finds the .mov file.

Lastly in that part of video madness, there’s the Flash fallback for those who hasn’t updated their web browsers in a while, and simply don’t have support for the video tag. Here you can use a Flash player that supports your .mp4 video file, and you don’t have to create a .flv (or whatever your preference is) file as well.

There are a couple of overlaps, and there will be more, but there will be no one format supported by all major browsers. At least not what it sounds like at this point in time. IE8 supports none, IE9 will support H.264 video (not sure about containers, .mp4, .m4v, .mkv?), and .webm IF the user have the VP8 codec installed on its system. Safari will of course only support the H.264 video. FF3.5 supports .ogv and FF4 will support .webm as well. Google Chrome will have support for all three. Android seems be badly flawed when it comes to playback of HTML5 video, so make sure you browse around for information (that link for example has a guide).

Fine, I understand the H.264 licensing issues and all that, but gosh dolly, it’s such a great codec! And it’s been around for so long and been so widely accepted, isn’t it just so incredibly stupid not to attack the beast head on? Just solve it already! Google, buy it and release it under some free license and we’re all set! Or something. Just please stop creating new formats just because…

Or better yet, all of you, just support all three and let the users decide. If the H.264 license thing becomes and issue down the road, then that’s that. You can curse yourself (Google) for not purchasing it years ago, and then move on.

Safari 5 features a really nice fullscreen mode of HTML5 video. Fullscreen mode in Firefox 3.6 on Mac is terrible, at least for me. Very laggy and choppy. Safari is smooth. But that might actually have more to do with the video files rather than the web browser. And obviously the race is only just starting.

I’m actually considering scrapping the .webm and .ogv formats altogether (at least for now), partly in protest, but mostly to save myself the trouble and server storage space. I’ll probably use a Flash player and play a .mp4 file that’s mobile friendly and use the HTML5 video as fallback for mobile devices. Anything else just seem like one step backwards to me.

Dive Into HTML 5 is a great resource if you want to read more about HTML5 in general, and video on the web specifically. I you’re curious to know what HTML5 features your web browser supports, you can check out The HTML5 Test, and it’ll tell you automatically.