Contents
HTML track Tag: Main Tips
- Media elements like <video> and <audio> can use text tracks. They are visible while the media is playing, and defined by
trackHTML tags. - The
tracktag is newly added in HTML5. - You don't need to use a closing tag.
Using track: HTML Media Text
The track tag is useful when defining HTML subtitles, captions, or other media text. It defines the text tracks for all the media elements:
<video controls width="325" height="245">
<source src="random_video.mp4" type="video/mp4">
<source src="track_video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="lithuanian_subtitles_lt.vtt" kind="subtitles" srclang="lt" label="Lithuanian">
</video>The text must be in the Web Video Text Tracks format and have a .vvt extension. You can also specify the timing of the track, which is crucial for HTML subtitles.
Available track Tag Attributes
How to add subtitles to a video? How to include captions or descriptions? First of all, you need to specify the location of the text track you need.
src is required to include. It defines the source of the track file (an URL address):
kind sets the kind of the text track:
There are five possible values for this attribute:
| Value | Definition |
|---|---|
| Subtitles | The default kind of track, providing translation of the video, as well as additional content (i.e., time or place). |
| Metadata | Used by scripts and not accessible by the user |
| Chapters | Used by the user to navigate the media |
| Captions | Provide transcription and translation of the video, as well as non-verbal information (i.e., sound effects). Might be used by deaf or hearing-impaired users, or displayed when the sound is muted. |
| Descriptions | Describe the video in text. Might be used by blind or vision-impaired users, or displayed when the browser can't show the video. |
default sets the track to be enabled by default:
label defines the title of the text track:
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">When the value of kind is HTML subtitles, you must also include the srclang attribute. It sets the language for the track text:
Note: when using srclang, make sure you define the language in a valid BCP 47 language subtag.