WebVTT
WebVTT (Web Video Text Tracks) is a text-based subtitle and caption format designed for HTML5 video in web browsers. Each cue has a start time, end time and text, with optional styling and positioning. WebVTT is also the standard subtitle format for HLS streaming, and it can hold chapter markers and thumbnail preview data.
Why it matters
WebVTT is the caption format web browsers and HLS streams use natively, so it is what most viewers actually see. Captions help muted viewers and meet accessibility rules for education and public sector buyers. WebVTT also powers thumbnail previews and chapters that make long videos easier to browse. An online learning platform can cover captions and chapters from one FastPix API, since in-video AI generates both, with captions in multiple language tracks.
How it works
- The file starts with the word WEBVTT, then a blank line.
- Each cue has a start and end time, written with a period before the milliseconds.
- Optional settings control the cue's position, alignment and styling.
- The player attaches the file as a text track and shows each cue at its time.
WebVTT vs SRT: what is the difference?
WebVTT is built for web video and supports styling and positioning, while SRT is a simpler, older subtitle format. WebVTT files start with a WEBVTT header and use a period before milliseconds, while SRT uses a comma. Browsers play WebVTT natively through the HTML5 track element.
How do I add WebVTT captions to an HTML5 video?
You add WebVTT captions by placing a track element inside the video element, pointing to the .vtt file. Set kind to captions or subtitles, plus a language and label. The file must be served with the text/vtt type, and cross-origin files need CORS headers.
Can WebVTT be used for thumbnail previews?
Yes, WebVTT is often used for thumbnail previews when scrubbing. Each cue points to an image, or a region of a sprite sheet, for a time range. The player reads the cue for the hovered time and shows that preview. The same approach can mark chapters.
Where it's used
Online learning platforms, creator apps and OTT services use WebVTT to show captions and subtitles in web and mobile players, helping viewers who watch on mute and meeting accessibility rules.
Where it usually goes wrong, and how FastPix handles it
Teams often add caption files by hand for each video and skip scrubbing previews entirely. Long lessons and shows then become hard to follow on mute and hard to navigate.
Automatic captions and subtitles from FastPix come with multiple language tracks. It also generates storyboard sprite sheets that its player uses for scrubbing previews. Long lessons and shows become easier to follow on mute and easier to navigate, without extra tooling for your team.
By the numbers
- A WebVTT file must be encoded as UTF-8, labeled with the MIME type text/vtt, and begin with the string WEBVTT. (WebVTT: The Web Video Text Tracks Format (W3C))
- Apple's HLS authoring rules require subtitles to be WebVTT or IMSC1 in fragmented MP4. (HLS Authoring Specification for Apple Devices)
