HTML5 Media

The Track Element

Though browsers will eventually provide support for embedded text tracks, HTML5 provides an additional technique to add text tracks to a media element: the track element. In addition to zero or more source elements, the HTML5 video and audio elements also support zero or more track elements.

Note

For this section, I switched from Big Buck Bunny to Sintel, another video from the Blender open movie project. The reason why is that Sintel has dialog, and the project provides subtitle files in SRT format in several different languages. Access Sintel videos and SRT files at http://www.sintel.org/.

A typical use case for a track element is the following, where a video file has an associated text track used to provide English captions for the video:

<video controls poster="someposter.jpg">
   <source src="videofile.m4v" />
   <source src="videofile.webm" />
   <track label="English subtitles" kind="captions"
            srclang="en" src="trackfile_en.srt" default />
</video>

The track element’s attributes are:

kind

The track category

src

The URL for the track source file

srclang

The track language

label

The label to display for the track file in a menu

default

Used to indicate this track is enabled unless the user signifies a preference for another track; can only be used on one track element

The kind and srclang attributes are equivalent to the TextTrack object’s kind and language properties, discussed in the last section. The language attribute takes a BCP 47 language designation, such as en for English. ...