HTML and CSS Reference
Adding Video Captions with Web Tracks
One goal of HTML5 is to make the Web more accessible to all users. To this end, in
2010 HTML5 introduced the ability to time-synchronize audio and video clips with text
using the track element
<video attributes >
<track kind=” type ” src=” url ” label=” text ” />
where the kind attribute defines the kind of text track associated with the audio or video
clip, the src attribute provides the location and filename of the track text, and the label
attribute provides a title for the text track. The kind attribute has the following five possible
values— subtitles (for foreign language subtitles), captions (for closed-captioning),
descriptions (to augment the audio or video with textual information), chapters (used
to divide the audio or video track into topical sections), and metadata (for meta informa-
tion that can be used with a program script).
Currently, the proposed format for time-synchronized text is webvtt ( web video text
tracks ). A WebVTT file consists of several time entries, each marked with a time stamp.
As the audio or video clip is played, the entries are displayed and synchronized along-
side the audio or video element. WebVTT also allows a developer to place captions at
specific locations within a video clip and to format the caption text using CSS.
The following code shows how HTML5 could augment the Royal Wedding dance clip
with a commentary track from the commentary.vtt file:
<track kind=”description” src=”commentary.vtt” label=”Commentary”
Currently, the track element and WebVTT are not supported by the browser market.
However, this will change in the upcoming years as HTML5 gains wider acceptance and
the W3C finalizes the specifications for Web tracks.
Introducing the object Element
For browsers that don't support the HTML5 video element, you once again must nest an
embedded object. To do this, you'll use the object element.
The object element was introduced in the specifications for HTML 4 for the purpose
of marking any kind of nontextual content. The object element replaced the embed
element, which was widely supported though never part of the previous HTML specifica-
tions released by the W3C. The syntax of the object element is
<object attributes >
where attributes define the object and parameters is values passed to the object
controlling the object's appearance and actions. The object element can be used with
almost any type of content, from sound and video clips to graphic images, PDF files, and
even the content of other Web pages. Figure 7-26 describes some of the attributes associ-
ated with the object element.