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.
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:
- Start the text file with
- Remove the cue markers at the start of each subtitle, or replace them with
- 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:
.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:
01:24.675 Life on the road is something I was <i>raised</i> to embrace.
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.