There are a couple of interesting developments in the world of HTML5 multimedia that you’ll be interested in. The first is the new
<track> element (currently only in the WHAT-WG spec due to political stuff).
<track> is a child of a
<audio> element that links to a timed track, or time-based data. The kind of data is set via a
kind attribute, which can take values of
metadata, depending on the type of information you’re adding to your media. These point to a source file containing timed text that the browser will expose via some kind of user interface, if the visitor requires additional data.
This will allow for “write once, use everywhere” accessibility; anyone linking to that file with a
<audio> element that includes the element can access your information.
<track kind=captions src=blah.srt>
Added 9 July 2010: Here’s a readable overview of the SRT format.
<span>s out of an in-page transcript to superimpose over a video.
WebM video format
The big news of the last month is that Google open-sourced the VP8 video codec that it acquired when it took over On2 Technologies. When combined with the Vorbis audio codec (that Spotify uses) and wrapped in a subset of the Matroska container format, it’s collectively known as WebM.
All YouTube videos are being transcoded to WebM, and Adobe have also announced they will include it in their Flash player. It’s available in an Opera 10.60 beta, a Firefox testing build, and a Chromium dev channel. Even Microsoft have said that IE9 will support it if the codec is installed on the computer.
The VP8 video codec itself is high-quality (Google had said that Ogg Theora wasn’t good enough compression-to-quality for YouTube, but Theora was based on the VP3 precursor to VP8). It’s available for streaming too.
If you want to encode to WebM, you can try the Miro Video Converter utility. Although it doesn’t allow you to optimise settings, it’s very easy to use. As the codec becomes more widespread, expect to see many more tools for content creation, editing, and transcoding.
Once production versions of the browsers are available, you should encode your videos with WebM as the first option, Ogg for older versions of Opera, Firefox and Chrome, falling back to royalty-encumbered H.264 for Safari and links to downloads or a Flash player for legacy browsers:
<video controls> <source src=video.webm type='video/webm; codecs="vorbis,vp8"'> <source src=video.mp4 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src=video.ogv type='video/ogg; codecs="theora, vorbis"'> <!-- embed Flash here --> <p>Your browser does not support video; download the <a href="video.webm">WebM</a>, <a href="video.mp4">mp4</a> or <a href="video.ogg">Ogg</a> video for off-line viewing.</p> </video>
If, however, you’re having problems with the iPad, put the MP4 version first in the
<source> element; apparently there’s a bug that causes the iPad only to see the first
It’s a long haul, and it’s not over yet, but
<track> and .webM show significant progress towards our goal of accessible, open, and royalty-free video playing natively in the browser.