Skip to main content

parseVtt()v4.0.537

Parses the contents of a WebVTT file (.vtt) and returns an array of Caption items.

Example usage
import {parseVtt} from '@remotion/captions';

const input = `WEBVTT

00:00:00.000 --> 00:00:02.500
Welcome to the Example WebVTT File!

00:00:03.000 --> 00:00:06.000
This is a demonstration of WebVTT subtitles.
`.trim();

const {captions} = parseVtt({input});

/* captions = [
  {
    confidence: 1,
    endMs: 2500,
    startMs: 0,
    text: 'Welcome to the Example WebVTT File!',
    timestampMs: 1250,
  },
  {
    confidence: 1,
    endMs: 6000,
    startMs: 3000,
    text: 'This is a demonstration of WebVTT subtitles.',
    timestampMs: 4500,
  },
]
*/

API​

input​

The contents of a .vtt file as a string.

Return value​

An object with the following properties:

captions​

An array of Caption items.

Behavior​

  • The WEBVTT header is optional and ignored, including any trailing text on the header line.
  • A cue may be preceded by an optional identifier on its own line.
  • Timestamps accept both HH:MM:SS.mmm and the shorter MM:SS.mmm form, and a comma may be used as the millisecond separator.
  • Cue settings after the timestamps (such as align:start position:10%) are ignored.
  • NOTE, STYLE and REGION blocks are skipped.
  • Multi-line cue text is joined with \n.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​