track element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The track
element allows authors to provide subtitles, captions, descriptions, chapters or metadata for media elements (audio
and video
). The textual information is provided in a separate file, that can be in any format supported by browsers, althoug the W3C provides a recommended standard called WebVTT.
Depending on the value of the kind
attribute, the track
element can be used to display five different types of information. Browsers will show text tracks according to the type of information it represents.
- subtitles: a transcription or translation of the audio, intended for cases where the audio is properly heard but not comprehended, like when the user doesn't understand the language spoken in the resource. Browsers should display this information as text overlaid on the video. This is the default value.
- captions: relevant audio information to aid users who can't hear the resource properly, like when the user is deaf, when the resource is muted or when the ambient noise is loud. Browsers should display this information as text overlaid on the video.
- descriptions: a description that explains a video (or a part of it), intended to aid users who aren't able to see it properly, like when the user is blind, when he's driving or when his screen has low intensity. Browsers should use speech synthesizers to reproduce the textual content.
- chapters: chapter titles, intended to allow users to navigate the media resource. Browsers may provide them in an interactive list.
- metadata: intended only for scripts use, they aren't rendered by the browser.
If the kind
attribute is omitted, browsers should consider the text track as subtitles.
Examples
In this first example, we're adding captions and subtitles to a video
with the use of track
. These text tracks are being provided in two WebVTT files. Note the correct configuration of the kind
attribute in each case.
<video width="384" height="288" controls>
<source src="/assets/videos/Cyrano_de_Beryerac.mp4" type="video/mp4">
<source src="/assets/videos/Cyrano_de_Beryerac.webm" type="video/webm">
<source src="/assets/videos/Cyrano_de_Beryerac.ogg" type="video/ogg">
<track kind="captions" label="Captions" src="/assets/videos/Cyrano_de_Beryerac_EN.vtt" srclang="en"></track>
<track kind="subtitles" label="Subtítulos en español" src="/assets/videos/Cyrano_de_Beryerac_ES.vtt" srclang="es"></track>
</video>
Next we're going to try adding the same kind of tracks to a sound file inserted with the audio
element.
<audio controls>
<source src="/assets/audio/Frankenstein_Chapter_5.ogg" type="audio/ogg">
<source src="/assets/audio/Frankenstein_Chapter_5.mp3" type="audio/mpeg">
<track kind="captions" label="Captions" src="/assets/audio/Frankenstein_Chapter_5_EN.vtt" srclang="en"></track>
<track kind="subtitles" label="Subtítulos en español" src="/assets/audio/Frankenstein_Chapter_5_ES.vtt" srclang="es"></track>
</audio>
Attributes
Specific attributes
kind
An enumerated value indicating the type of text track provided by this element. There are five possible values, all case-insensitive:
- subtitles: a transcription or translation of the audio, intended for cases where the audio is properly heard but not comprehended, like when the user doesn't understand the language spoken in the resource. Browsers should display this information as text overlaid on the video. This is the default value.
- captions: relevant audio information to aid users who can't hear the resource properly, like when the user is deaf, when the resource is muted or when the ambient noise is loud. Browsers should display this information as text overlaid on the video.
- descriptions: a description that explains a video (or a part of it), intended to aid users who aren't able to see it properly, like when the user is blind, when he's driving or when his screen has low intensity. Browsers should use speech synthesizers to reproduce the textual content.
- chapters: chapter titles, intended to allow users to navigate the media resource. Browsers may provide them in an interactive list.
- metadata: intended only for scripts use, they aren't rendered by the browser.
If this attribute is omitted, browsers should consider the text track as subtitles.
Example
<video src="World_war_II.mp4" width="800" height="600" controls>
<track kind="captions" label="Captions" src="World_war_II_EN.vtt" srclang="en"></track>
<track kind="subtitles" label="Subtítulos en español" src="World_war_II_ES.vtt" srclang="es"></track>
</video>
src
The URI (location) of the resource that contains the tracks information. This resource can be provided in any format supported by browsers, but the recommended standard for web is WebVTT.
The src
attribute is mandatory in this element, being that it points to the resource that contains the text track, without which the element wouldn't have anything to show.
Example
<video src="Beauty_and_the_beast.mp4" width="1080" height="720" controls>
<track kind="subtitles" label="Subtítulos en español" src="Beauty_and_the_beast_ES.vtt" srclang="es"></track>
</video>
srclang
A language tag identifying the language used by the resource declared in the src
attribute.
The presence of this attribute is mandatory when the kind
attribute takes the value "subtitles". In other cases it can be ommited.
Example
<video src="Il_mondo_gira.mp4" width="800" height="600" controls>
<track kind="subtitles" label="Subtitles in english" src="Il_mondo_gira_EN.vtt" srclang="en"></track>
<track kind="subtitles" label="Subtítulos en español" src="Il_mondo_gira_ES.vtt" srclang="es"></track>
</video>
label
A user-readable title describing the nature or purpose of the text track. Qhen the attribute type
takes the values subtitle
, caption
or description
, browsers may use the information contained in this attribute to list the track in the user interface, in order to allow users to select it.
Example
<video src="Moby_Dick.mp4" width="1080" height="720" controls>
<track kind="subtitles" label="Subtítulos en español" src="Moby_Dick_ES.vtt" srclang="es"></track>
</video>
default
A booolean value indicating if the text track is to be loaded when no other track is more suitable according to the user's preferences. When this attribute has the value "default" or the empty string (""), or when it's simply present, the text track becomes default.
Example
<video src="Seconda_guerra_mondiale.mp4" width="800" height="600" controls>
<track kind="subtitles" label="Subtitles in english" src="Seconda_guerra_mondiale_EN.vtt" srclang="en" default></track>
<track kind="subtitles" label="Subtítulos en español" src="Seconda_guerra_mondiale_ES.vtt" srclang="es"></track>
</video>
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.