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.

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.

Being relatively new, the track element isn't fully supported by browsers. Authors shouldn't rely on this element to display important information.

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.

As of 2014/11/21, no browser displays captions for audio elements. You may expect the following example not to show captions in your browser.

<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.