John Smith's Blog

Ramblings (mostly) about technical stuff

Experimental rhythm action game using HTML5 video and Safari 3D CSS3 transforms

Posted by John Smith on

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...

Photo of an iPad running the game

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 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...

So the majority of web video is available in HTML5? Not from where I'm sitting

Posted by John Smith on

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...

Screen grab of Firefox 4 browser being told by that Flash is required to video their video content


Screen grab of Firefox 4 browser showing a black rectangle rather than a video


Screen grab of Firefox 4 browser being told by Vimeo that Flash is required to video their video content


Screen grab of Firefox 4 browser being told by YouTube that Flash is required to video their video content

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

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...

About this blog

This blog (mostly) covers technology and software development.

Note: I've recently ported the content from my old blog hosted on Google App Engine using some custom code I wrote, to a static site built using Pelican. I've put in place various URL manipulation rules in the webserver config to try to support the old URLs, but it's likely that I've missed some (probably meta ones related to pagination or tagging), so apologies for any 404 errors that you get served.

RSS icon, courtesy of RSS feed for this blog

About the author

I'm a software developer who's worked with a variety of platforms and technologies over the past couple of decades, but for the past 7 or so years I've focussed on web development. Whilst I've always nominally been a "full-stack" developer, I feel more attachment to the back-end side of things.

I'm a web developer for a London-based equities exchange. I've worked at organizations such as News Corporation and Google and BATS Global Markets. Projects I've been involved in have been covered in outlets such as The Guardian, The Telegraph, the Financial Times, The Register and TechCrunch.

Twitter | LinkedIn | GitHub | My CV | Mail

Popular tags

Other sites I've built or been involved with


Most of these have changed quite a bit since my involvement in them...