This month at London Web Standards, two in-depth HTML5 talks, covering bits which aren't in common usage at the moment, and what you can do with the bits that are. This is part two, Opera's Patrick Lauke (@patrick_h_lauke) on
<audio>. Part one has Google's Michael Mahemoff (@mahemoff) on 8 HTML5 features you haven't seen before. Below are my notes and write-up. Enjoy!
First off, Patrick had a cold, hence the poorly drawn tissue in the top-left corner.
<audio> are some of the most important elements in HTML5. Steve Jobs thought so much of these new elements and HTML5's potential, that Flash was dropped from iOS devices and everyone was encouraged to make the transition. Even Microsoft has recognised their importance, adding native support for the elements in IE9.
The basic idea behind
<audio> was to do for these media types what had been done for images. Instead of using messy
<embed> tags to make Flash work properly, create something simple that doesn't rely on proprietary technology. Therefore,
<video> is now a native object in the browser, which allows you to treat it just like any other object, including styling it with CSS and even using CSS transforms on the video.
There's an important aside around video formats which I'll cover briefly here. There are three codecs:
- MP4/H.264 - implemented by Chrome, Safari and IE9, encumbered with potential royalty payments, whatever the MPEG association try to say.
- Ogg Theora - implemented by Chrome, Firefox and Opera, open source but not very good as a codec
- WebM - implemented by Chrome, Firefox, Opera and IE9 (with downloaded codec) it's made for the web and will be the de-facto standard going forward. Apple have yet to commit to using the format
Thankfully, you can use multiple sources in your videos which will fall back to one another. You can even fall back all the way to Flash to give older browsers a fighting chance.
<audio> is very similar in implementation to
Best yet, is that Patrick officially certified these techniques ready for use. Their is sufficient support and fallback options to support all browsers, take YouTube for example, running HTML5 video for nearly a year now. However, he asks that you use feature detection rather than browser sniffing when making these fallbacks. There are a few tools out at the moment which do all this for you, such as SublimeVideo and videoJS.
And that's it. Hope you enjoyed it. You can read Part one of #lwsdeep here.