HTML <track> Tag

The <track> tag adds time-based subtitles, translations, or captions to an audio or a video. Text tracks are stored in a .vtt file format.

HTML Tag

Example

#

A <track> with English subtitles.

<video>
  <source src="/media/video.mp4" type="video/mp4" />
  <track src="/media/video.vtt" kind="subtitles" srclang="en-US" />
</video>

Using <track>

The <track> tag adds a time-based text track to <audio> or <video> elements.

A text track includes subtitles, captions, etc. that are played together with the media.

The tracks are in .vtt format (WebVTT, Web Video Text Tracks).

More Examples

A <track> with Spanish subtitles to the movie 'The Godfather'.

<video controls="controls" width="320" height="176">
  <source src="/media/godfather.mp4" type="video/mp4" />
  <source src="/media/godfather.ogg" type="video/ogg" />
  <track src="/media/godfather.srt" kind="subtitles" srclang="es" label="Spanish" />
</video>

Attributes for <track>

This table lists the <track> tag attributes.

Attribute Value Description
src URL Required. Defines the file source path or URL
kind captions
chapters
descriptions
metadata
subtitles
Defines the kind (type) of text track
label text Sets the text track title
srclang language-code Sets the track's text language. Required for subtitle.
default default The default track. Can only be used by one track per media element.
id    identifier Defines a unique identifier for the track.

For additional global attributes see our global attributes list.


Media Tags

The <track> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, these tags allow you to create powerful multi-media solutions.

Here is a list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support

Here is when <track> support started for each browser:

Chrome
18.0 Mar 2012
Firefox
31.0 Jul 2014
IE/Edge
10.0 Sep 2012
Opera
15.0 Jul 2015
Safari
6.0 Jul 2012

You may also like

Guides