This section introduces the HTML5 <track> element, useful for adding closed captions, subtitles, descriptions, and metadata to your videos. It comes with a new JavaScript API.
The WebVTT format used for describing a track file is also presented in this chapter. VTT stands for Video Text Track
Please check the browser support related to the <track> element support by browsers.
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 provide both options for those who require them, such as people with hearing deficiencies.
Here is an example of a video element that includes a <track> element in the .vtt (WebVTT) format (line 9 in the source code shown below):
The example uses a <track> element to overlay basic captions on the video: sounds and music are described, in addition to standard subtitles that correspond to what the different movie characters say.
<video height="272" width="640"
poster="https://mainline.i3s.unice.fr/mooc/q1fx20VZ-640.jpg"
crossorigin="anonymous"
controls>
<source src="https://mainline.i3s.unice.fr/mooc/sintel.mp4"
type="video/mp4">
<source src="https://mainline.i3s.unice.fr/mooc/sintel.webm"
type="video/webm">
<track src="https://mainline.i3s.unice.fr/mooc/sintel-captions.vtt"
kind="captions" label="Closed Captions" default>
</video>
The <track> element at line 9 has an attribute named kind that indicates the type of the track that is included. Possible values are: subtitles, captions, descriptions, chapters or metadata.
The <track> element also has an attribute default that indicates that we want this track to be displayed by default when reading the video.
We also used an attribute named crossorigin in the video element, which is necessary just to run this demo, as it is required by the server that hosts the video from this example (server = codepen.io, but as the video and .vtt files come from another origin -another server-, this attribute is necessary).
Multiple tracks are needed to support different langages, video captions for the hearing-impaired, subtitles, etc.
Below is an example (from the specification) that includes multiple <track> elements (subtitles for three languages and captions only for English):
<video src="brave.webm">
<track kind=subtitles src=brave.en.vtt
srclang=en
label="English">
<track kind=captions src=brave.en.hoh.vtt
srclang=en
label="English for the Hard of Hearing">
<track kind=subtitles src=brave.fr.vtt
srclang=fr
lang=fr
label="Français">
<track kind=subtitles src=brave.de.vtt
srclang=de
lang=de
label="Deutsch">
</video>
Note the use of some new attributes in the <track> element:
label: the label value will be displayed in the GUI control that is included in the default HTML5 video player,
srclang: gives the language for the text track data. The value must be a valid BCP 47 language tag. This attribute must be present if the element's kind attribute is in the subtitles state.
From the HTML specification: The track element
From the W3C specification: WebVTT: The Web Video Text Tracks Format
From MDN's Web Docs: WebVTT and Adding captions and subtitles to HTML5 video
An article from 3playmedia: How to create a WebVTT file