WebVTT – Web Video Text Tracks, a standard previously known as WebSRT – is a time-indexed text file format referenced by browsers as cue information for HTML5 video or audio content. A WebVTT file frequently contains subtitles or captions, although there are many other possibilities.

In the example above, I’ve created a subtitle track for the award-winning short film Dark Side Of The Lens by Mickey Smith. All modern browsers, including IE10+ and Firefox 31+, support WebVTT, the only exception being Opera Mini.

While most assume that text tracks are solely for the deaf or foreign language translations, WebVTT has many more uses: descriptive tracks can be read by screen readers for the blind, and WebVTT metadata and chapter information can allow users to navigate easily through online video content just like DVDs and Blu-Ray. Add the fact that Google is already indexing closed captions to create more powerful and accurate searches for video, and writing WebVTT tracks for your HTML5 content becomes a no-brainer: the new format won’t even affect the performance of older browsers.

WebVTT files are separate from the video or audio content that references them, meaning that subtitles are not "hard coded" into pixels. This also means that making and modifying .vtt files is very easy: any text editor can be used to create subtitle content, although I’d suggest employing one of the specialized tools I discuss in the next article.

Basic WebVTT Subtitle Syntax

As its original name suggests, WebVTT is closely related to the .srt subtitle format you may already be familiar with. In this article, I’ll focus on creating basic subtitle tracks; future entries will discuss the many more options for .vtt files.

A subtitle track has just a few requirements: it must start with a WEBVTT line, then be followed by cue points and associated subtitle information. For example, the dialogue track for Dark Side Of The Lens starts this way:

 01:24.675
Life on the road is something 
I was raised to embrace. 
 
01:26.000 --> 01:29.725
Me Ma always encouraged us to
open our eyes and hearts to the world…
 
01:30.120 --> 01:34.040
…make up our own minds for 
experience and be inspired.

Time information is in the format hh:mm:ss.mmm (hours, minutes, seconds, milliseconds), with the hour counter optional.  The first timestamp in each line defines the moment the subtitle text appears; the second, when it vanishes.

Unlike HTML, WebVTT honors hard returns; breaks in a cuepoint means that the associated text will appear on separate lines. You can place also place optional cuepoint markers in front of each subtitle time. The completed subtitle track is saved as a UTF-8 encoded text file with a .vtt extension.

Adding Subtitle Tracks to HTML5 Video

HTML5 has built-in support for WebVTT in the form of the <track> element, which is used inside the video or audio element to which the subtitles apply:

<video controls>
	<source src="dark-side-of-the-lens.webm" type="video/webm">
	<source src="dark-side-of-the-lens.mp4" type="video/mp4">
	<track label="English subtitles" kind="captions" srclang="en" src="dark-side-of-the-lens.vtt" default>
</video>

The syntax for <track> is fairly self-explanatory: the label attribute is optional, and its value user-defined. kind describes the information contained in the .vtt file: subtitles, captions, descriptions, chapters, or metadata. subtitles are considered translations of audio content for non-native speakers; captions are transcriptions of dialog, sound effects, musical cues and other audio designed to be read when the audio information cannot be heard (either because the user is hard of hearing, or due to the fact that the original audio is otherwise not clearly audible). srclang is the language used in the track, encoded in the same way languages are defined in HTML. The default attribute – which is currently required by some browsers in order to show any text information during playback – simply signifies that this track should be considered the default subtitle file.

Optional Apache Config

The one concession you may need to make is to your site’s .htaccess file, as .vtt files may not be served as UTF-8. If that is the case, you could the following, assuming you were using Apache as a server:

<FilesMatch \.vtt$>
	ForceType text/vtt;charset=utf-8
</FilesMatch>

Adding subtitle information to video and audio content is easy; creating and formatting that information is considerably more complex, and something I cover in the next article.

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