WebVTT Explained: Timed Text Tracks for Website Video

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Start with the right text

   0:18

   Prepare accurate text for the information the track represents.

   On-screen labels: Accurate wording; Relevant information; Clear text.

2. 2

   Step 2: Use the expected file structure

   0:30

   A WebVTT file begins with the WEBVTT header and contains timed cues.

   On-screen labels: WEBVTT header; Timed cues; Text content.

3. 3

   Step 3: Review cue start and end times

   0:42

   Each cue needs the interval when its text should appear.

   On-screen labels: Start time; End time; Intended moment.

4. 4

   Step 4: Attach the track to the player

   0:54

   The website or hosting system needs the actual track connection.

   On-screen labels: Media player; Track file; Correct connection.

5. 5

   Step 5: Identify language and purpose

   1:06

   Use suitable language and track labels for the content.

   On-screen labels: Track language; Useful label; Caption purpose.

6. 6

   Step 6: Watch with the track enabled

   1:18

   Check timing, readable wording and the player controls.

   On-screen labels: Track enabled; Matching timing; Usable controls.

See it in a diagram

Read the diagram as text

1. Cue text: The intended wording
2. Time interval: The cue start and end
3. Player track: The connected text track

Watch with the track enabled. Review the displayed wording and timing in the real media player.

A caption file stored beside a video is not automatically attached to every hosting player.

Diagram by Jersey Web. Open full size · Source and further detail (opens in a new tab)

Common questions

Go further