Subtitled frames from 'The Dark Side of the Lens'
Part of the Accessibility Reading List

As a newly-emerging format, the tools to create WebVTT text tracks for are limited. Right now, the most straightforward method is Microsoft’s Video Caption Maker: as an online tool, it’s available to every platform (instructions). However, it has very limited features; for complete, millisecond-level control of subtitles, I’d recommend a native application.

Subtitling Applications

While no subtitling programs natively support WebVTT yet, it’s very easy to convert the .srt files they produce into .vtt files. (See instructions in the next section).

  • Subs Factory is a free, full-featured subtitle editor for Mac OS X; it has a few interface issues, and is a translation from French, but is still very good.
  • Jubler is cross-platform, based on Java, and as such it’s somewhat slower.
  • Subtitle Edit is very fully-featured, but Windows-only.

All of these applications export subtitles in .srt format; the next step is to convert the file into .vtt format.

Converting SRT to VTT

Due to their close relationship, conversion from .srt into .vtt is very simple. A typical .srt file will look something like this: 

 00:01:24,675
Life on the road is something 
I was raised to embrace.

The process is little more than a find-and-replace:

  1. Start the text file with WEBVTT
  2. Remove the cue markers at the start of each subtitle, or replace them with Cue - prefixes.
  3. Optionally, remove the 00: hour marker at the start of each timestamp.
  4. Convert the comma before the millisecond mark in every timestamp to a decimal point (easy enough with a find-replace: ,7 to .7, for example).
  5. Optionally, add styling markup to the subtitle text.
  6. Save the file with a .vtt extension and link to it from a <track> element in an HTML5 page.

The resulting file looks like this: 

 01:24.675
Life on the road is something 
I was <i>raised</i> to embrace.

Alternatively you could use an online resource, such as Simple SubRip (GitHub source).

Validating A VTT File

The W3C doesn’t yet offer a validation service for .vtt files, but others exist: right now, I’d recommend this Live WebVTT validator created by Anne van Kesteren.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.