HTML and CSS Reference
In-Depth Information
Listing 7-9.
WebVTT Cue Example
WEBVTT
1
0:00:00.000 --> 0:00:05.000
<b>Hello, World</b>
2
0:00:05.000 --> 0:00:10.000
How <i>are</i> you <i>,<c.green>Today?!</c></i>
CSS
<style>
.green {
color: green;
text-transform: uppercase;
}
</style>
HTML
<video width="640" height="360">
<source src="someVideo.mp4" type="video/mp4" />
<source src=" someVideo.webm" type="video/webm" />
<source src=" someVideo.ogg" type="video/ogg" />
<track src="helloWorld.vtt" kind="subtitles" srclang="en" label="English" />
</video>
Use
AddType text/vtt .vtt
.
Note
Using the
track
tag in an HTML5 video, you can show captions, subtitles, and/or metadata about the video
content, and using the previous example, you can see that you can even target specific CSS rules to the subtitle
information. The file format for the
track
element uses a WebVTT file, and browser support is currently limited, but
it's coming! Using the previous code, you should be seeing an example similar to Figure
7-13
.