VTT: Overview
WebVTT (VTT) is a captioning format designed for the web. It extends the simple time-boxed model of SRT with support for cue settings (position, alignment, line), styling via classes, text formatting, and non-dialogue metadata. For film platforms and festival sites, VTT enables accessible, polished captions that adapt gracefully to varied screen sizes and UI overlays.
Capabilities and Syntax
A VTT file begins with the WEBVTT header and may include comments, regions, and style blocks. Cues use HH:MM:SS.mmm timing (dot for milliseconds) and can specify settings like line:, position:, size:, align:. Ruby annotations, italics, and b-i-u formatting are supported, as are speaker prefixes and voice spans (<v Anna>). Regions group cues for scrolling karaoke or side panels.
VTT: Production Workflow
Author captions in tools that export VTT natively or convert from SRT while adding placement and classes. Use classes to move captions away from burned-in text or to style SDH descriptors. Test across browsers and streaming stacks—some implementations differ in support for CSS styling in ::cue and shadow DOM scoping. For accessibility, adhere to reading speed guidelines, include non-speech information, and ensure color contrast against variable video content.
Use in Interactive Experiences
Because VTT can carry metadata cues, it doubles as a timeline trigger track: synchronize haptic seats, smart-lighting, or trivia overlays without altering picture. Keep such usage separate from accessibility captions to avoid clutter; ship a dedicated metadata VTT and a user-selectable caption VTT.
Migration and Pitfalls
Beware line wrapping differences between players; avoid absolute pixel positioning in favor of percentage-based settings. Validate with linters, and store authoritative caption masters in a version-controlled repository alongside edits to the locked dialogue script.
VTT: Related Terms
- SRT, IMSC1/TTML,
::cueCSS, SDH/CC.