WebVTT

The educational technology and digital learning wiki
Jump to navigation Jump to search

<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:

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_de.vtt" srclang="de"/>
        Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

Live example files:

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.

However, some HTML5 video players do provide support.

Validators

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
Introductions
Discussion
General timed track