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>
Be sure your server's .htaccess or http.conf file is configured to support the MiMe type Vtt.
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 .
 
Search WWH ::




Custom Search