Reading the cues of a loaded track
readyState goes 0 (none) → 1 (loading) → 2 (loaded); 3 means the file failed. Cue settings like line:0 become properties.
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
readyState before load: 0
readyState after load: 2
"intro" 0.5 → 3 | <v Asha>Welcome to the show! | line: auto align: center
"" 3.2 → 5 | [pan sizzles] | line: 0 align: start
Plain text of cue 1: Welcome to the show!