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 &, < and >
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:
- 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.
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
- 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)