HTML and CSS Reference
In-Depth Information
cluding subtitle files). After a subtitle file has been embedded within a file, it is still up to the media player (read:
browser) to find it and put it to use.
The second method you can use to add subtitles to a video is
out-of-band
subtitles. These are not directly packaged
within the media file; instead, they are provided as separate .VTT files. The new
<track>
element can be used to
associate these files with a video.
Later in this section you use the HTML5
<track>
element to add subtitles to your video. First, however, take a
quick look at some of the attributes of the
<track>
element:
•
src
—This attribute provides a path to the subtitles file.
•
kind
—This attribute describes what kind of content the file referenced in the
src
attribute contains. We will
be using
subtitles
, but other possible values are
captions
,
descriptions
,
chapters
, and
metadata
.
•
label
—The attribute should be used to provide a title for the track. If you have more than one
<track>
ele-
ment, the browser may present a list of subtitles for the user to choose from; this label will appear in that
list.
•
srclang
—This attribute specifies the content language of the subtitles file. Browsers may try to select the
correct subtitle's file based on the value of this attribute and the user's preferences.
•
default
—This attribute sets the current track to be used as default unless the user's browser preferences spe-
cify otherwise.
I think you've learned enough about the
<track>
element now. Let's add some subtitles to your video.
The code for this exercise can be found in folder 11.
Follow these steps to add subtitles:
1.
Download the subtitle's file (
subtitles_en.vtt
) from the topic's website and place it in your
videos
folder. You can find it in the
chapter11/11/videos
folder.
2.
Open the
about.html
file in your text editor.
3.
Underneath the last
<source>
element, add the following
<track>
element.
<video id="myVideo" width="400" height="225"
poster="img/poster.png" preload="none">
<source src="videos/mikethefrog.webm" type="video/webm">
<source src="videos/mikethefrog.ogv" type="video/ogv">
<source src="videos/mikethefrog.mp4" type="video/mp4">
<track kind="subtitles" label="English subtitles"
src="videos/subtitles_en.vtt" srclang="en"
default>
</track>
<p>
