John Smith's Blog

UPDATE: this is currently broken on my iPad, suspect it's iOS 4.2 related. I think I might be able to do a hacky fix, but I'm still working on it. It should work OK on regular Safari though.

It's probably not the most sensible thing in the world to publicize a >10MB video file that's being hosted on an Amazon EC2 'micro' instance, but let's see how long this lasts before I take it down to avoid too much damage to my credit card...

One of the things that surprised me when I got an iPad was that in Mobile Safari, embedded YouTube videos would play within the browser, rather than launching the standalone app as they do on the iPhone/iPod Touch. (Assuming that they've been embedded using the iframe method, rather than a Flash video.) This inspired me to start playing with HTML5 video, which previously hadn't struck me as that interesting.

Unfortunately, the embedding of YouTube video in an <iframe>, coupled with the way the underlying video file URLs are uniquely signed - presumably to inhibit hotlinking - means that it's difficult to impossible to have a lot of customized interaction with the YT video itself, but by hosting the video myself, I've able to build something really, simple but (hopefully) effective.

Anyway, at http://bit.ly/aRoq3V is a very basic rhythm action game. It's primarily aimed at the iPad, but will work acceptably on Mac/Windows Safari. Other browsers will have mixed results, as currently none of them support the 3D transformations added into WebKit's CSS, not even Chrome. The 3D stuff is super-simple, and could probably be 90% faked using regular CSS/JS/images, but as this is purely experimental, I've not been inclined to try. If this was a serious project, I'd probably do it in Objective-C, but I was really only interested in the HTML5/CSS3 aspects.

Tweet me to let me know how much you hate it...

A recent survey that says "54% of web video is now available for playback in HTML5" has been widely reported in the past couple days. From that figure, one might think that those of us who prefer not to install Flash on our computers can now watch more skateboarding dogs than we can shake a stick at.

However, a quick test of some of the sites mentioned in that survey tells a somewhat different story...

blip.tv

Dailymotion

Vimeo

YouTube

The above tests were done on a Fedora 12 machine running the nightly Firefox 4 beta (aka Minefield), which is quite capable of running videos such as the one at html5video.org.

I've yet to do a more thorough investigation as to what's happening with these sites, but one or more of the following seem possible:

• By default, they all assume anyone visiting from a desktop browser will have Flash installed. There's definitely a strong feeling out there that you only need to provide Flash-free versions of sites for mobile devices, like this for example.
• HTML5 video is only offered if a user explicitly requests it. Last time I checked, on YouTube you had to explicitly go to a page which gave you a cookie to enter their HTML5 "beta". Although if you do have to jump through such hoops, why don't these sites provide a link to the relevant page to set the options, rather than merely linking to Adobe's download page?
• The sites only have the video in H.264 format. They detect that Minefield doesn't have a plug-in to handle it, and so don't offer any HTML5 video. If so, does this merely mean that we're replacing Adobe with MPEG-LA as the overlord of online video content - in which case, I'm not actually sure that's a positive step. The original report does mention H.264, but perhaps any follow-up survey should go further, and break HTML5 video availability into the stats for how much H.264 vs OGV vs WebM are all supported?
• The sites don't recognize Minefield 's User-Agent string, and so don't realize it can handle HTML5 video, and just fall back to the perceived lowest common denominator. (I don't think this is likely, but it's possible.)

Based on this sort of thing, I don't see Flash video going away any time soon...