WebVTT

<pageby nominor="false" comments="false"/>

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

Do not trust details. Need to test this first - Daniel K. Schneider 19:25, 23 April 2012 (CEST)

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, i.e. so-called cues, separated by at least a blank line

In addition:

• You must use UTF-8 encoding
• Files must be served as text/vtt, e.g. add this to an Apache server http.conf or .htacess file

AddType text/vtt .vtt

• Line returns can use Windows or Unix like characters, e.g. \r, \n or \r\n. This basically means that if you see a new line in a text editor, then you are doing fine.
• The &, < and > must be replaced by &amp;, &lt; and &gt;

Simple example

Tested with Chrome 18. You will have to enable track using the chrome://flags URI. Search for track, the click to activate. Track file:

WEBVTT

Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour

Disclaimer
00:01:10.000 --> 00:02:10.000
This is just a track demo using VTT

HTML5 portion:

<video id="movie1" controls preload="metadata">
 <source src="videos/state-of-wikipedia-480x272.mp4"/>
 <source src="videos/state-of-wikipedia-480x272.ogv"/>
 <source src="videos/state-of-wikipedia-480x272.webm"/>
 <track kind="subtitles" label="EN subtitles" src="subtitles_en.vtt" srclang="en" default/>   
 <track kind="subtitles" label="Soustitre en FR" src="subtitles_fr.vtt" srclang="fr"/>
        Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

Live example files:

• http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html
• http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt

Simple cues

Cues roughly have the following structure:

(1) A header, e.g. a number

This header cannot include the "-->" or \r, \n, \r\n

(2) A timing

time1 --> time2

using the hh:mm:ss.mmm or the shorter mm:ss.mmm format

optionally followed by layout clues.

Example of timing lines

00.00.01.000 --> 00.01.01.017
00.01.000 --> 01.01.017
00.00.01.000 --> 00.01.01.017 T:50%

(3) One or more lines of text

The text to be displayed. This text can include some HTML-like markup

Voice: <v voice name> allows to define a voice (name of the person who speaks)

CSS class: <c.classname>Some text ...</c> This allows for flexible styling. CSS is defined in the HTML

Bold: <b>Some text ...</b>

Italic: <i>Some text ...</i>

Underline: <u>Some text ...</u>

Ruby annotations: <ruby>base text<rt>annotation</rt></ruby>

(4) A separator line

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

Cue settings

Allow to position the text over the video. Cue settings are define on the timing line.

Line position

L:10 ... means 10 lines down

L:50% .... means 50% down

Horizontal position

T:0% ... means left

T:80% ... means far to the right

Horizontal alignment

A:start ... means left-aligned

A:middle ... centered

A:end ... right aligned

Text width

S:50% ... means taking up 50% of the video width

Vertical text

D:vertical ... grows to the left

D:vertical-lr ... grows to the right

Example

WEBVTT

1
00:00.000 --> 01:00.000 D:vertical
Pile of characters
 
2
00:01.000 --> 00:02.000 S:50%
Bon
soir !

Karake style cues

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 cues

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 cues

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

Browser support

As of April 2012:

• Chrome 18 supports a subset, but you will have to enable it.

Enter the URI:

chrome://flags

Activate track support (search for "track" in the page) and click.

• Internet Explorer 10 (beta) supports both WebVTT and Timed Text.
  • Read Video: timed text tracks (sometimes, these guys are ahead ...)

However, some HTML5 video players do provide support. See HTML5 audio and video for some more information about these. There exist probably over a dozen good players.

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

Simple live example using the LeanBack Player

<div class="leanback-player-video">
  <video controls="controls" preload="metadata" poster="wikipedialogo.png" width="480" height="272">
   <source src="videos/state-of-wikipedia-480x272.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="videos/state-of-wikipedia-480x272.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="videos/state-of-wikipedia-480x272.ogv" type='video/ogg; codecs="theora, vorbis"' />
	
   <track enabled="true" kind="subtitles" label="EN"
          src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
   <track enabled="true" kind="subtitles" label="EN VTT"
          src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
   <track enabled="true" kind="subtitles" label="FR" 
          src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
   <object class="leanback-player-flash-fallback" width="640" height="360"
           type="application/x-shockwave-flash"
           data="http://releases.flowplayer.org/swf/flowplayer.swf">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer.swf" />
      <param name="allowFullScreen" value="true" />
      <param name="wmode" value="opaque" />
      <param name="bgcolor" value="#000000" />
      <param name="flashVars" 
             value="config={'playlist':['wikipedialogo.png', 
		{'url':'videos/state-of-wikipedia-480x272.mp4','autoPlay':false,'autobuffering':false}]}" />
   </object>
   <div class="leanback-player-html-fallback" style="width: 640px; height: 360px;">
     <img src="wikipedialogo.png" width="640" height="360" alt="Poster Image" 
          title="No HTML5-Video playback capabilities found. Please download the video(s) below." />
    <div>
<strong>Download Video:</strong>
   <a href="videos/state-of-wikipedia-480x272.mp4">.mp4</a>
   <a href="videos/state-of-wikipedia-480x272.webm">.webm</a>
   <a href="videos/state-of-wikipedia-480x272.ogv">.ogv</a>
 </div>
</div>
</div>

Live example file:

• http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html

Track files:

• http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
• http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.srt
• http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt

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)