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
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"
Search WWH ::

Custom Search