As a newly-emerging format, the tools to create WebVTT text tracks for HTML5 audio and video 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:
- 1
- 00:01:21,700 --> 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:
Start the text file with
WEBVTTRemove the cue markers at the start of each subtitle, or replace them with
Cue -prefixes.Optionally, remove the
00:hour marker at the start of each timestamp.Convert the comma before the millisecond mark in every timestamp to a decimal point (easy enough with a find-replace:
,7to.7, for example).Optionally, add styling markup to the subtitle text.
Save the file with a
.vttextension and link to it from a<track>element in an HTML5 page.
The resulting file looks like this:
- WEBVTT
- 01:21,700 --> 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.