“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee
Accessibility is an important element of web development, and with the ever-growing prevalence of video content, the necessity for captioned content is growing as well. WebVTT is a technology that solves helps with captioned content as a subtitle format that integrates easily with already-existing web APIs.
That’s what we’re going to look at here in this article. Sure, WebVTT is captioning at its most basic, but there are ways to implement it to make videos (and the captioned content itself) more accessible for users.
See the Pen
VJJMZz by Geoff Graham (@geoffgraham)
Hi, meet the WebVTT format
First and foremost: WebVTT is a type of file that contains the text “WebVTT” and lines of captions with timestamps. Here’s an example:
00:00:00.000 –> 00:00:03.000
– [Birds chirping]
– Its a beautiful day!
00:00:04.000 –> 00:00:07.000
– [Creek trickling]
– It is indeed!
00:00:08.000 –> 00:00:10.000
– Hello there!
A little weird, but makes pretty good sense, right? As you can see, the first line is “WEBVTT” and it is followed by a time range (in this case, 0 to 3 seconds) on Line 3. The time range is required. Otherwise, the WEBVTT file will not work at all and it won’t even display or log errors to let you know. Finally, each line below a time range represents captions contained in the range.
Note that you can have multiple captions in a single time range. Hyphens may be used to indicate the start of a line, though it’s not required and more stylistic than anything else.
The time range can be one of two formats: hh:mm:ss.tt or mm:ss.tt. Each part follows certain rules:
Hours (hh): Minimum of two digits
Minutes (mm): Between 00 and 59, inclusive
Seconds (ss): Between 00 and 59, inclusive
Milliseconds (tt): Between 000 and 999, inclusive
This may seem rather daunting at first. You’re probably wondering how anyone can be expected to type and tweak this all by hand. Luckily, there are tools to make this easier. For example, YouTube can automatically caption videos for you with speech recognition in addition to allowing you to download the caption as a VTT file as well! But that’s not it. WebVTT can also be used with YouTube as well by uploading your VTT file to your YouTube video.
Once we have this file created, we can then embed it into an HTML5 video element.