Generate a WebVTT caption file

Why the web has its own caption format

WebVTT exists because a browser needs more from a caption file than a desktop player does. It is a W3C format, it is what the HTML5 <track> element consumes, and it is the only sidecar format you can rely on a browser to read natively.

It is close enough to .srt to look like the same thing at a glance. The differences are a WEBVTT header line, a full stop rather than a comma before the milliseconds, and optional cue settings after the timecode. That last one is the reason to choose it.

A cue can say where on the frame it should appear, how it should align, and which CSS class it carries. So a caption can move out of the way of a lower-third graphic, or a speaker's name can be styled differently from their words. None of that is expressible in an .srt at all.

Attaching it to a video on your own page

A <track> element inside a <video>, with kind set to captions, srclang set to the language, and default if it should be on without the viewer asking for it. The browser renders the text itself and gives the viewer a control to turn it off.

Two things go wrong here reliably. The first is the file being served with the wrong content type, which has to be text/vtt; serve it as text/plain and the browser fetches it, declines to parse it, and shows no captions and no error. The second is cross-origin: a track on another domain needs CORS headers and the crossorigin attribute on the video.

Worth checking the obvious thing first when captions do not appear. A missing WEBVTT header line on the first line of the file invalidates the whole file, and that is also the single difference between a valid .vtt and an .srt someone renamed.

Generating and editing one here

Drop a video or audio file above and press Transcribe. The model runs in your browser on your own hardware, so the file is never uploaded, and the timed lines appear as it works. Export as WebVTT when you are done.

Edit first. The checks that matter for a web caption track are the same ones that matter anywhere: no line past 42 characters, nothing faster than 17 characters a second, nothing so brief it reads as a flash. All three are flagged for you rather than left to judgement.

The cue settings this format allows are not editable here, so what you get is a valid .vtt with default positioning. Adding a position or a class to a specific cue is a text edit afterwards, and the format is plain enough that this is genuinely a one-line change per cue.

When to use this rather than an .srt

The question answers itself most of the time, because it is really a question about who draws the text.

• Use WebVTT when a browser is the player, which includes your own site and anything embedded in a web page
• Use WebVTT when a caption has to avoid part of the frame, or when speaker names need their own styling
• Use .srt for desktop players, editing software, and platforms that name SubRip in their upload instructions
• Burn the captions in when the destination takes one video file and offers no caption slot at all