Concept 04
Subtitle Tracks
Subtitles in HLS are their own renditions, sitting alongside the video variants. Each language is a WebVTT file referenced by its own small playlist, grouped and attached to the video streams so a player can offer a language menu and switch instantly. This sandbox ships English, Spanish, and French.
A WebVTT file
WebVTT (.vtt) is a plain-text captions format: timestamp ranges followed by the text to show during that window.
WEBVTT
00:00:00.000 --> 00:00:04.000
Welcome to the HLS Streaming Sandbox.
00:00:04.000 --> 00:00:08.000
This clip is a self-generated test pattern.Declared in the master playlist
Each language becomes an EXT-X-MEDIA rendition in a shared GROUP-ID. Video variants reference that group via SUBTITLES="subs".
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",
LANGUAGE="en",DEFAULT=YES,AUTOSELECT=YES,URI="subs_en.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Español",
LANGUAGE="es",DEFAULT=NO,URI="subs_es.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Français",
LANGUAGE="fr",DEFAULT=NO,URI="subs_fr.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=5144131,RESOLUTION=1920x1080,
SUBTITLES="subs"
stream_0.m3u8How the player handles them
- 1
Discover the group
Parsing the master playlist, the player collects every subtitle rendition sharing the group id and builds a language menu.
- 2
Honor DEFAULT / AUTOSELECT
DEFAULT=YESmarks the track shown initially;AUTOSELECTlets the player match your system language automatically. - 3
Load VTT on demand
Only when a track is selected does the player fetch its WebVTT cues — subtitles don't waste bandwidth until used.
- 4
Render synced to playback
Cues are displayed by timestamp against the current playback position, and switching language just swaps the active cue source — no reload.
Try it on the home page: the Subtitles row lets you switch between English, Español, and Français while the clip plays.