Last night I had the pleasure of attending two excellent HTML5 presentations by Christian Heilmann, organised by the London Ajax User Group and hosted by Skills Matter eXchange.
The first focussed on multimedia, specifically what HTML5’s video and audio tags provide us. The second was about how we need to move HTML5 out of the laboratory and start putting it to use in the real world.
Christian has already updated his own blog to talk about the event.
Multimedia on the Web
Christian’s first admission before the presentation really got started was that he had previously worked as an audio producer, and literally had experience of cutting and pasting tape! In a later aside he revealed why the stop button is redundant and only need a play/pause button is required – pausing tape wasn’t a great option as it stretched the tape and therefore a stop button was necessary.
The first part of the presentation looked at the history of multimedia within the browser. We started with images, through midi audio, Java applets (the one he showed was truly awful, with a flying marquee to boot!), RealPlayer, QuickTime, Microsoft Media Player, Shockwave, all the way to Flash.
Ultimately all of the competing technologies lost out and Flash was crowned king. It handled all of the video and audio needs, and had DRM built in to protect the content. Of course, this being a presentation about HTML5, Heilmann went on to express his aggrievances with Flash, including that it’s heavy on battery life (at least on his MacBook Air), that you need another editor for building web content beyond the one for your main page, it is a black box and there are accessibility issues in any browser other than IE.
Moving onto the HTML5 audio/video tags, we have finally got a decent competitor to Flash, not requiring a plug in, supporting better accessibility, allowing other web content to overlay a video and such like. However, Christian points out that this is not a silver bullet, since although it overcomes some of the limitations of Flash, there are things it does that aren’t as good – the numerous formats that need to be supported in different browsers and the lack of DRM being the case in point. Although this will restrict some websites from being able to drop Flash in favour of HTML5, I believe that this this is only likely to be an issue for those sites that treat HTML5 as a sustaining rather than a disruptive technology, failing to exploit its strengths.
Christian went on to describe several of the idiosyncrasies of of the video and audio tags, such as the need for H.264 (MP4) to be the first source when running on an iOS device. Another example was the canPlayType(type) method which the W3C specification states must return "probably", "maybe" or ""!
Christian finished the presentation by going through an awesome collection of demos showcasing all cool stuff that can be done with HTML5 video and audio:
- HTML5 Video Events and API – demo page from W3C showcasing all the events and properties available for HTML5 videos
- Spirit Of Indiana – Heilmann’s demonstration of how video can be combined with other HTML content in a cool way
- Popcorn.js Butter – browser based point and click authoring tool for video
- Transforming HTML5 video with CSS3 – another of Heilmann’s demos showing how CSS3 and video can interact
- Manipulating video using canvas – shows a video shot against a green screen and one showing the composited result, all done using HTML5 (please note that this worked in Firefox 3.6 on my PC, but not Chrome 8 )
- Dynamic Content Injection – tracking the position of the two iPhones in the video, then embedding your selected content, including another video
- HTML5 Guitar Tab Player – showcasing possibilities with the audio tag
The full presentation is available online.
Using HTML5 Sensibly
Christian started this presentation with a short history lesson. Back in 1939, the USA build the Antarctic Snow Cruiser which was intended to facilitate the exploration of Antarctica. The media hype around it was phenomenal, however when it finally arrived in Antarctica, it turned out that the wheels couldn’t grip the ice. It was an incredible feat of engineering, much heralded by the media and public, but ultimately it failed. Heilmann included this as a reminder that for all the talk of HTML5, it hasn’t really achieved anything in the real world yet.
The presentation moved onto one of the big challenges with HTML5. At the moment it is being banded about to cover pretty much anything that is new within browsers. However if you look under the covers what users are asking for are features from CSS3 and new typographies. No one is asking for an HTML5 date picker (yet anyway).
Christian states that the premise of HTML5 is pragmatism – making it simpler for all of us to code for the web. However what do we need to do with the older browsers? Can we just stop supporting them? Probably not in most cases. Fortunately there are ways around this with the likes of Modernizr and HTML5 Boilerplate which do all the heavy lifting and leave us to focus on what our users actually need rather than be bogged down in supporting all the different browser quirks.
Towards the end of the presentation the potential of handling browser quirks on the server, rather than passing verbose HTML that works around them to the client, was raised. No conclusion was reached, however this intentionally or unintentionally sounded rather like the debate storming after Alex Russell’s Cutting The Interrogation Short post a week ago.
Far from being a presentation full of answers, there were numerous questions that Christian posed to the audience. At the moment HTML5 has a lot going for it, but despite the hype, it’s achieved little more than a few cool demos. Answering the questions will allow us to move it to the next level.
At the end of the presentation, Christian summarised quite succinctly what HTML5 can achieve (although I may be paraphrasing slightly here):
I want the web to be beautiful, and to be accessible
Again, the full presentation is available online.
Conclusion
All in all a couple of excellent presentations that reaffirm my belief that HTML5 really is the way forward, however it won’t get there by itself – it needs web developers to embrace it and start to build some amazing real world applications.