demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Make Online Video Accessible And Searchable With WebVTT

accessibility / video

Estimated reading time: 4 minutes, 9 seconds

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 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. To see the text track, you’ll need to use a browser that supports WebVTT: Safari 6, IE10, Opera 12.1, or Chrome 18+ with the track flag turned on.

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’ll discuss in a future article.

Basic WebVTT Subtitle Syntax

As its original name suggests, WebVTT is closely related to the .srt subtitle format you may be familiar with from other sources. 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:

WEBVTT
 
01:21.700 --> 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 , 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’ll approach in future articles: you might want to follow me on Twitter to keep up to date with breaking blog posts on the topic.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.