WebVTT

Draft

Introduction

“The WebVTT format (Web Video Text Tracks) is a format intended for marking up external text track resources. The main use for WebVTT files is captioning video content.” (WebVTT, retr. April 23 2012).

WebVTT can be used in the track element of HTML5 video. As of April 2012, browsers may not implement this, but probably some JavaScript-based HTML5 players do.

See also:

• Timed Text (TT or TTML)
• HTML5 audio and video

The format

The WebVTT format is fairly complex plain text format. It surprisingly doesn't use XML.

File structure

A WebVTT file has the following structure:

• First line must be the word "WEBVTT"
• Second line must be empty
• Entries, separated by at least a blank line whose first character is a whitespace

Simple entries

Simple entries are simple to create.

• A header, e.g. a number
• A time using the hh:mm:ss.mmm format, optionally followed by layout clues
• The text to be displayed. This text can include some HTML and other markup
• A line with a blank space

Example of a simple entry:

WEBVTT

1
00:00:01.000 --> 00:00:20.000
<v DKS>This is a <b>very short</b> video that is not about WEBVTT

Karake style entries (source: HTML5 doctor)

WEBVTT

1
00:00:01.000 --> 00:00:10.000
Never gonna give you up <00:00:01.000> 
Never gonna let you down <00:00:05.000> 
Never gonna run around and desert you

Multiple line entries

You can use HTML p tags.

WEBVTT

Introduction
00:00:10.000 --> 00:01:10.000
<p>Wikipedia is a great adventure</p>
<p>It may have shortcomings, but it remains the largest collective knowledge construction endevour</p>
 
Disclaimer
00:01:10.000 --> 00:02:10.000
<p>This is just a track demo using VTT</p>

JSON

WEBVTT

Wikipedia
00:01:15.200 --> 00:02:18.800
{
"title": "State of Wikipedia",
"description": "Jimmy Wales talking ...",
"src": "http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/120px-Wikipedia-logo-v2.svg.png",
"href": "http://en.wikipedia.org/wiki/Wikipedia"
}

Software

Validators

• WebVTT validator (copy/paste)

Examples

Simple example 1 (taken from the draft specification)

WEBVTT

00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City
 
00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

Links

Specification

• WebVTT, Living Standard — Last Updated 19 April 2012, retrieved April 2012.

Organizations

• Web Media Text Tracks Community Group

Introductions

• Video Subtitling and WebVTT, November 29th, 2011 by Tom Leadbetter.
• Getting started with the HTML5 track element, by Sam Dutton, Feb. 8, 2012
• Understanding WebVTT file format (draft), Julien Villetorte, 2011, 20 May

Discussion

• WebVTT format - Web Video Text Tracks format (LeanbackPlayer, 2011)
• Recent developments around WebVTT by Sylvia, June 2011.

General timed track

• Timed track formats (WhatWG wiki)
• http://wiki.whatwg.org/wiki/Timed_tracks Timed tracks (WhatWG wiki)