Captions on a playing video
The .vtt files are written straight into src as data URLs so the example works offline. In real pages, src points to a .vtt file. Only the default track starts showing.
The <track> element attaches timed text to a video: captions for people who can't hear it, subtitles for people who don't speak its language, written in a simple text format called WebVTT.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a WebVTT file with two cues: "Hi, I'm Asha." spoken by Asha from 0 to 2 seconds, and the sound "[phone rings]" from 2.5 to 4 seconds.
Attach English captions (on by default) and French subtitles to a video talk.mp4.
Write JavaScript that logs "Cue changed" plus the active cue's text each time the captions change on <video id="v">.
Explain it without notes
What's the difference between captions and subtitles, and what kind would you use for each?
Describe the structure of a WebVTT file and one common mistake when converting from SRT.
What do the three text track modes mean, and when is a track's file downloaded?
Why are captions required for accessibility, and who else benefits?
Preview
Console
Nothing logged yet.Expected console output
captions en English → showing
subtitles hi Hindi → disabled