Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.
What You Need to Know
Track connects timed text to a video or audio element, usually from a .vtt file. Captions do not appear magically; you must write or provide a timed-text file and give the track an appropriate language and label.
In this example: show English captions in a video.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<video controls width="600">
<source src="media/lesson.mp4" type="video/mp4">
<track src="media/captions-en.vtt" kind="captions" srclang="en" label="English" default>
</video>Let’s Read the Code
- <video>: The video element creates a video player and can include alternative formats.
- <source>: A source points to a media file or image choice with a type or other condition.
- controls: Controls asks the browser to provide its native audio or video player controls.
- width: Width gives a preferred or intrinsic media width, depending on the element.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Captions and transcripts are different. A captions file contains timed cues that appear during playback. A transcript is a readable written version that can stay on the page. Neither one is automatically produced simply by adding a track element.
Your Turn
Create a valid WebVTT file and turn captions on in the browser player.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.
Key Takeaways
- Track connects timed text to a video or audio element, usually from a .vtt file.
- <video>: The video element creates a video player and can include alternative formats.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.