<track>
Published Jun 13, 2023Updated Jun 14, 2023
Contribute to Docs
The <track>
element is used to add subtitles, closed captions, or other text-based content to <video>
or <audio>
elements in an HTML file.
Syntax
<element
source= src="url">
<track src="text-based file description" kind="type of text"
other attribute="description">
</element>
<track>
can be paired with the following attributes:
HTML Attribute | Description |
---|---|
chapters |
Utilized when a user navigates through the audio or film. |
default |
Implies that the track should be enabled unless the user’s preferences indicate that another track is best suited for the project. Can only be used with one <track> element at a time. |
description |
Describes textual description of the video content. This is best suited for users who are blind or if the video cannot be seen. |
kind |
Describes how the track’s text should be used (e.g. captions , subtitles , descriptions , and chapters ). |
label |
Describes list of available text tracks. |
metadata |
Tracks used by scripts, not available to users. |
src |
The track’s URL, it must be valid and in a Web Video Text Tracks (.vtt, WebVTT) file format. |
srclang |
Track text data’s language. |
Example 1: Audio
The snippet below shows the <track>
tag with the captions
attribute for an <audio>
element:
<audio controls><source src="cat.mp4" type="audio/mpeg" /><trackkind="captions"src="path_to_captions.vtt"srclang="en"label="English"/></audio>
Example 2: Video
The snippet below shows the <track>
tag with the captions
attribute for a <video>
element:
<video controls width="200"><source src="https://www.youtube.com/watch?v=0QHaxrUkSE" type="video/mp4" /><trackdefaultkind="captions"src="https://youtube.com/captions.vtt"srclang="en"/></video>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.