Media Elements, Multiple Tracks, and Accessibility - HTML5 Media - page 96

Multiple Tracks and the Track List Interfaces
Another very new addition to the HTML5 specification related to the media elements is sup-
port for a collection of track lists—whether embedded directly in the media resource, added
to the resource programmatically, or added using the track element:
<video controls poster="poster.jpg" width="480" height="204">
<source src="videofile.m4v" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
<track label="English subtitles" kind="subtitles"
srclang="en" src="videofile.vtt" default />
<track label="Chapter List" kind="chapters"
srclang="en" src="videofile_chaps.vtt" />
<track label="Captions" kind="captions"
srclang="en" src="videofile_caps.vtt" />
</video>
Why would your media resource need to have more than one audio or video track? Well, think
of your DVDs and Blu-Rays. Many times they provide audio tracks for different languages,
as well as tracks for a director voiceover, or even a copy of the movie with embedded audio/
visual commentary.
In addition, you may have text tracks for subtitles in various languages, as well as captions,
and even a chapter list.
Though we're not re-creating your DVD or Blu-Ray player in a little box in a web page,
people have become more sophisticated about what to expect from a movie playback exper-
ience. The more of the expected functionality we can provide, the better the experience for
those visiting our web pages or using our applications.
NOTE
You can add text tracks to the media element declaratively within the HTML, or programmatically
using JavaScript, but you can't add additional audio or video tracks. These have to be added using an
audio or video editor.
Audio and Video Track Collections
The collection of audio tracks can be accessed from the HTMLMediaElement's audioTracks
property, while the collection of video tracks can be accessed from the videoTracks property.