HTML and CSS Reference
In-Depth Information
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
” />
</video>
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:
<video controls=”controls”>
<source=”rwdance.mp4” />
<track kind=”description” src=”commentary.vtt” label=”Commentary”
/>
</video>
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
>
parameters
</object>
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.
