Steve Workman's Blog

HTML5 Video and Audio at lwsdeep

Posted on by Steve Workman About 2 min reading time

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 <video> and <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!

Sketchnotes from HTML5 Video and Audio

First off, Patrick had a cold, hence the poorly drawn tissue in the top-left corner.

<video> and <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 <video> and <audio> was to do for these media types what had been done for images. Instead of using messy <object> and <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:

  1. MP4/H.264 - implemented by Chrome, Safari and IE9, encumbered with potential royalty payments, whatever the MPEG association try to say.
  2. Ogg Theora - implemented by Chrome, Firefox and Opera, open source but not very good as a codec
  3. 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.

Each browser gets to implement their own controls for the video player, but these can be overridden and the whole video controlled by JavaScript. There are events which fire at different times and  theoretically it's possible to time-match subtitle tracks, which WhatWG are looking into for future versions of the HTML spec.

<audio> is very similar in implementation to <video>, with the same format fight, this time between MP3 and Ogg Vorbis. Interestingly you can remove the controls from the page and run the whole thing from JavaScript, allowing for such horrible interactions as a whoosh sound when hovering over a button.

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.