DEV Community

Free Live Caption
Free Live Caption

Posted on Originally published at freelivecaption.com

SRT vs VTT: Which Caption File to Use, and How to Convert

#a11y #tutorial #webdev #video

SRT and VTT both hold timed captions as plain text. Here is how they differ, which one YouTube, Vimeo and a video tag want, and how to convert between them.

Summary

  • VTT is the safer pick when you can choose: Vimeo recommends it and the HTML track element expects a .vtt file. YouTube accepts both.
  • To convert SRT to VTT, add a WEBVTT first line and change the comma before the milliseconds to a period, then save as UTF-8.
  • Zoom saves cloud-recording transcripts as VTT and Teams offers .docx or .vtt, so the same conversion steps apply to both.

Which format for which place

VTT is the safer default when you get to choose. Vimeo recommends WebVTT, and the HTML <track> element expects a .vtt file. YouTube lists both formats, so SRT is fine there.

Where the captions go Use Notes
YouTube SRT, or VTT if you need positioning Both are accepted
Vimeo VTT SRT is accepted too
<video> tag on your own page VTT Convert an SRT first
A media player or TV app Whatever its subtitle menu lists Convert if it names only one

How the two files look

Both are plain text: a timing line, the caption, a blank line. Here is the same caption in each.

SRT:

1
00:00:01,000 --> 00:00:03,500
Welcome back to the channel.

2
00:00:03,800 --> 00:00:06,200
Today we're fixing a leaky tap.
Enter fullscreen mode Exit fullscreen mode

WebVTT:

WEBVTT

00:00:01.000 --> 00:00:03.500
Welcome back to the channel.

00:00:03.800 --> 00:00:06.200
<v Sam>Today we're fixing a leaky tap.
Enter fullscreen mode Exit fullscreen mode

The differences you will actually run into:

  • A WebVTT file must begin with the word WEBVTT. SRT has no header, just a counter before each caption.
  • SRT writes the timestamp as HH:MM:SS,mmm with a comma, according to YouTube's format list. The WebVTT spec uses a period, and it lets you drop the hours.
  • The numbers above each caption are optional in WebVTT, so converted files can keep them.
  • WebVTT can mark who is speaking with a <v> voice tag, move a caption with cue settings such as position, align and line, and hold NOTE comments and STYLE blocks with CSS. YouTube says an SRT file carries no style information and no positioning.

YouTube

Either format uploads. YouTube points beginners to SRT (or SBV) because it needs only timing and text, and SRT must be plain UTF-8. Pick VTT when a caption has to sit somewhere other than the default spot, or you want bold, italic or underline. YouTube's page limits WebVTT styling to those three tags and describes its WebVTT support as an initial implementation, so don't count on fancy CSS surviving.

Vimeo

Vimeo takes SRT and WebVTT, both in UTF-8. To add a file, open your Library, open the video, click the Languages button in the toolbar to the left of the player, then click the plus button and upload the file from your computer. Two dropdowns ask for the language and whether the file is a subtitle or a caption track. The three-dot menu next to an uploaded file lets you download, replace, delete or edit it.

A video tag on your own page

Browsers load the track from a .vtt file, so an SRT has to be converted first. A minimal version:

<video controls src="talk.mp4">
  <track default kind="captions" srclang="en" label="English" src="talk.en.vtt">
</video>
Enter fullscreen mode Exit fullscreen mode

MDN's attribute notes cover the rest. kind="captions" includes sound effects and musical cues, while kind="subtitles" covers dialogue or its translation and requires srclang. Only one track per video can carry default. The track URL must have the same origin as the page unless the <video> element has a crossorigin attribute, which matters if your captions sit on a CDN.

A media player or TV app

Open the player's subtitle or caption menu, or its help page, and see which formats it names. If it lists both, either works. If it lists one, convert to that. If the clip has to play anywhere, you can also build the subtitles into the picture.

Converting SRT to VTT and back

A short file takes a few minutes in a plain-text editor. Work on a copy and save as UTF-8, which YouTube, Vimeo and the WebVTT spec all call for. If CapCut's auto captions fail and you need an SRT instead, see the SRT import fallback for CapCut.

SRT to VTT:

  1. Add WEBVTT as the first line, then a blank line.
  2. Change the comma before the milliseconds in every timing line to a period. In an editor with regular-expression search, find (\d\d:\d\d:\d\d),(\d\d\d) and replace it with \1.\2 (some editors want $1.$2). A plain replace-all on commas would also change commas inside the dialogue.
  3. Save the file with a .vtt extension.

VTT to SRT:

  1. Delete the WEBVTT line and any NOTE or STYLE blocks.
  2. Change the period before the milliseconds in each timing line to a comma. If a timestamp has no hours, add them, so 05:12.300 becomes 00:05:12,300.
  3. Remove anything after the timing on that line (align:, position:) and strip <v Name> tags. SRT has no place for them.
  4. Number the captions 1, 2, 3 from the top and save with a .srt extension.

Why Zoom and Teams give you a VTT

Zoom saves the audio transcript of a cloud recording as a separate VTT file. That needs a Pro, Business, Education or Enterprise account with both cloud recording and audio transcription turned on. Teams lets the organizer and co-organizers download a meeting transcript as .docx or .vtt from Chat → Recap → Transcript → Download dropdown.

A meeting transcript needs a time for each passage and a name for each speaker, and WebVTT has both built in through cue timings and the <v> tag. Teams also offers the .docx if you just want to read the text. For an SRT from either app, follow the VTT to SRT steps above. The full steps for getting the file are in our guides to saving a Zoom transcript and downloading a Teams transcript. If you only have plain text with no times, see our guide on adding timing to a plain transcript.

If the captions don't show up

  • Accented or non-Latin characters look broken. The file isn't UTF-8. Vimeo warns that special characters may display wrongly otherwise. Re-save it as UTF-8.
  • A <track> shows nothing. Check that the file is WebVTT rather than a renamed SRT, and that its first line is WEBVTT. Then check the origin: a caption file on another domain needs crossorigin on the <video>. If both are fine, look at what your host sends for .vtt files, since the spec names text/vtt as the MIME type.
  • YouTube drops your formatting. SRT carries none, and WebVTT gets bold, italic and underline only.
  • A player rejects a converted file. Compare the timing lines against the samples above. A comma left in a VTT or a period left in an SRT is the usual slip.

Sources and checks

Top comments (0)