442 CHAPTER 11 HTML5 supports multimedia
Using the WebVTT format
WebVTT format is very simple. The file starts with a declaration of the WebVTT file, a line is
skipped, and a cue is defined. The cue is composed of a timespan on the first line, and the
caption follows on the next line or lines. After that, a new line separator is provided, and the
next cue is defined. The following is a WebVTT file.
WEBVTT FILE00:00:07.500 --> 00:00:08.750
He's fidgety.00:00:09.000 --> 00:00:12.000
There he goes!!!You can include comments by using the word NOTE followed by a space or a new line, as
shown in the following example.
WEBVTT FILE00:00:07.500 --> 00:00:08.750
He's fidgety.NOTE I think the timing should be adjusted to span to the end of the video
00:00:09.000 --> 00:00:12.000
There he goes!!!The WebVTT format is evolving and provides for other features that are not currently
supported on most browsers. One such feature is the ability to put an ID on a cue so you can
assign a CSS format to the cue. You can also add elements within the caption and provide CSS
styles for the elements.Adding support for WebVTT to IIS Express
If you try to use WebVTT files on a website that is hosted by IIS Express, you might find that
IIS Express won’t serve a .vtt file because it serves only known file types. You can add support
for .vtt files by executing the following commands.
cd “C:\Program Files\IIS Express"
appcmd set config /section:staticContent /+[fileExtension='.vtt',mimeType='text/vtt']When you enter the second command, you should get a message stating that the changes
were applied.Lesson summary
■■The <video> element is new in HTML5.
■■The most common video formats for the web are .ogg/Theora, WebM/VP8, and
MPEG-4/H.264.
■■When implementing the <video> element, at a minimum you must provide a video
source.