Topic 18 of 41
Media <track>
Overview
Accessibility and global reach are paramount in modern web engineering. The <track> element works inside <video> and <audio> tags to attach time-synced text files (usually .vtt WebVTT files). This enables Closed Captions (for deaf users), Subtitles (for foreign translations), and even chapter markers. Without the <track> element, media is completely inaccessible to millions of users.
Syntax
html
<video controls poster="/thumbnail.jpg">
<source src="presentation.mp4" type="video/mp4">
<!-- Default English Closed Captions (Accessibility) -->
<track
src="captions_en.vtt"
kind="captions"
srclang="en"
label="English (CC)"
default
>
<!-- Spanish Subtitles (Translation) -->
<track
src="subtitles_es.vtt"
kind="subtitles"
srclang="es"
label="Spanish"
>
</video>Common Pitfalls
- Confusing
kind="captions"withkind="subtitles". Subtitles assume the user can hear the audio but doesn't understand the language (just translates dialogue). Captions assume the user is deaf and include crucial non-verbal audio cues (e.g., '[Dramatic music playing]', '[Door slams]'). - Using the wrong file format. HTML5 natively expects WebVTT (
.vtt) files. If you try to use older formats like.srtwithout a parser, the browser will likely reject them.
Interview Questions
Q:
What does the
default attribute do on a <track> tag?A:
It tells the browser that this specific track should be enabled and visible immediately when the video loads, without requiring the user to manually open the captions menu and turn it on.
Real-World Example
A standard WebVTT file structure that syncs perfectly with the HTML <track> tag.
example
html
WEBVTT
1
00:00:01.000 --> 00:00:04.000
Welcome to the Underrated Coder platform!
2
00:00:05.000 --> 00:00:08.500
Today, we are going to master HTML5 accessibility.Check Your Knowledge
Test your understanding of Media <track> with these quick questions.