WebVTT: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 1: Line 1:
<pageby nominor="false" comments="false"/>
{{stub}}
{{stub}}


Line 11: Line 12:
* [[Timed Text]] (TT or TTML)
* [[Timed Text]] (TT or TTML)
* [[HTML5 audio and video]]
* [[HTML5 audio and video]]
'''Do not trust details'''. Need to test this first - [[User:Daniel K. Schneider|Daniel K. Schneider]] 19:25, 23 April 2012 (CEST)


== The format ==
== The format ==
Line 16: Line 19:
The WebVTT format is fairly complex plain text format. It surprisingly doesn't use [[XML]].  
The WebVTT format is fairly complex plain text format. It surprisingly doesn't use [[XML]].  


'''File structure'''
=== File structure ===


A WebVTT file has the following structure:
A WebVTT file has the following structure:
* First line must be the word "WEBVTT"
* First line must be the word "WEBVTT"
* Second line must be empty
* Second line must be empty
* Entries, separated by at least a blank line whose first character is a whitespace
* Entries, i.e. so-called '''cues''', separated by at least a blank line whose first character is a whitespace
 
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 &amp;, &lt; and &gt; must be replaced by &amp;amp;, &amp;lt; and &amp;gt;
 
=== 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%


=== Simple entries ===
; (3) One or more lines of text
: The text to be displayed. This text can include some HTML-like markup
: &lt;v voice name&gt; allows to define a voice (name of the person who speaks)
: CSS class - &lt;c.classname&gt;Some text ...&lt;/c&gt; This allows for flexible styling. CSS is defined in the HTML
: Bold: &lt;b&gt;Some text ...&lt;/b&gt;
: Italic: &lt;i&gt;Some text ...&lt;/i&gt;
: Underline: &lt;u&gt;Some text ...&lt;/u&gt;
: Ruby annotations: &lt;ruby&gt;base text&lt;rt&gt;annotation&lt;/rt&gt;&lt;/ruby&gt;


Simple entries are simple to create.
; (4) A separator line with a blank space
* 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:
Example of a simple entry:
Line 41: Line 70:
</source>
</source>


'''Karake style entries''' (source: [http://html5doctor.com/video-subtitling-and-webvtt/ HTML5 doctor])
'''Karake style cues''' (source: [http://html5doctor.com/video-subtitling-and-webvtt/ HTML5 doctor])
<source lang="text">
<source lang="text">
WEBVTT
WEBVTT
Line 52: Line 81:
</source>
</source>


=== Multiple line entries ===
=== Multiple line cues ===


You can use HTML <code>p</code> tags.
You can use HTML <code>p</code> tags.
Line 68: Line 97:
</source>
</source>


=== JSON ===
=== JSON cues ===
<source lang="text">
<source lang="text">
WEBVTT
WEBVTT
Line 85: Line 114:


=== Browser support ===
=== Browser support ===
As of April 2012, only Chrome
However, some HTML5 video players do provide support.


=== Validators ===
=== Validators ===

Revision as of 19:25, 23 April 2012

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

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:

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 whose first character is a whitespace

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 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
<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 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 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, only Chrome

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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=WebVTT&oldid=38885"