The <track> tag adds subtitles, translations, etc. to an audio or a video.
Text tracks are stored in a .vtt file format.
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>
The <track> tag adds a time-based text track to <audio> or <video> elements.
A text track can include subtitles, captions, tranlations, etc. that are played together with the media.
The tracks are in .vtt format (WebVTT, Web Video Text Tracks).
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>
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.
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, they 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 |
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 |
