Module 12: Audio, Video, and Embedded Content
source, track, and WebVTT
Understand media source selection and add timed text tracks for captions and subtitles.
The source element offers alternative media files to audio, video, and picture. The browser selects a source it can use. The track element attaches timed text data, commonly stored in a WebVTT (.vtt) file.
A simple WebVTT file begins with WEBVTT and contains cues with start and end times:
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to the HTML lesson.
00:00:04.500 --> 00:00:08.000
We will build a page one section at a time.
The track’s kind identifies its purpose: captions, subtitles, descriptions, chapters, or metadata. Use srclang to identify the language and label to provide a readable track name.
Captions include speech and relevant non-speech audio information for people who cannot hear the audio. Subtitles generally provide dialogue text, often translated into another language. Choose the track type that matches the content. Check timing, spelling, speaker identification when needed, and meaningful sounds.