The WebVTT format used for describing a track file is also presented in this chapter.
Most of the major desktop browsers now support HTML5 captioning
- closed captions describe all relevant audio present in the video (fire, rain, birds, gun fights, etc.).
- subtitles are only for spoken words.
The accessibility features of TV programs often propose both options for people with hearing deficiencies.
TYPICAL USE: ADD A SUBTITLE/CAPTION TRACK TO A <VIDEO> ELEMENT
The <track> element cannot be used with a file:// URL. Please use http:// and a Web server. Your server must use a special MIME format for the .vtt files: text/vtt;charset=utf-8 (set by default on most servers now).
Examples of the lines to add to an Apache Web server:
- <Files mysubtitle.vtt>
- ForceType text/vtt;charset=utf-8
It might be worth mentioning that most browsers work fine with WebVTT even if the MIME Type is not set, but Internet Explorer doesn’t: in fact it will ignore WebVTT entirely unless the MIME Type is set correctly!
- <video height=“272” width=“640”
- <source src=“http://demo.jwplayer.com/html5-report/sintel.mp4”
- <source src=“http://demo.jwplayer.com/html5-report/sintel.webm”
- <track src=“http://demo.jwplayer.com/html5-report/sintel-captions.vtt”
- kind=“captions” label=“Closed Captions” default>
EXTERNAL RESOURCES (OPTIONAL, IF YOU WISH TO LEARN MORE)
- The W3C specification for the <track> element
- The living W3C standard for the WebVTT format
- HTML5 video with SRT subtitles
- Creating and validating WebVTT subtitles
- Silvia Pfeiffer’s HTML5 Video Accessibility slides give more examples of working with markup, as well as showing how to build chapter tracks for navigation and description tracks for screen readers.