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