Working with webVTT

(note: this page is based on information from the webVTT Draft Specification and is intended to be a simplified reference. In case of confusion, for the complete and definitive answer please refer there.)

The basics are simple and you can create and edit webVTT files in a text editor:

 

WEBVTT

NOTE
This is a note.

00:00:00.000 --> 00:00:10.000
This is the cue text...

NOTE This is another note.

00:00:10.000 --> 00:00:25.000
...and this is another cue.

 

You can do it easily enough using a text editor, but it's time consuming and tedious. It's much easier and quicker using the Caption Generator, though - whether you are converting a script or transcript into a webVTT .vtt captions file, or editing/synchronising a webVTT .vtt captons file you have already, or you are wanting to create and synchronise ccaptions from scratch and publish them as a webVTT file.

The caption generator will give you a transcript file, too, generated from the .vtt file you have created.

Please be patient, though: it's a work in progress!

 

Here's more detail on the webVTT file format:

Minimal format:

WEBVTT<vttbr>
<vttbr>
start timestamp --> end timestamp<vttbr>
[cue-payload]<vttbr>
<vttbr>
start timestamp --> end timestamp<vttbr>
[cue-payload]<vttbr>
<vttbr>
...etc

Full format:

WEBVTT [file-description-text]<vttbr>
<vttbr>
[NOTE [<vttbr>][comment-text<vttbr>]]
[cue id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
[NOTE [<vttbr>][comment-text<vttbr>]]
[cue-id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
...etc

(note: <vttbr> represents the webVTT line terminator, which can be one of \r\r, \r, \n)

Cue id

  • Free text
  • These characters not allowed: \r, \n

Example CSS treatment:

::cue(#cue-id){
    font-color:red;
}

comment-text

  • Free text
  • This substring not allowed: -->
  • May be multi-line, but no blank lines

start-timestamp, end-timestamp

  • Format HH:MM:SS.sss
  • Separated by the substring {space/tab}-->{space/tab}
  • end-timestamp must be greater than start-timestamp for the same cue
  • cue start and end times can overlap partially or completely with other cues
  • timestamps can be embedded in cue-payload to sequentially reveal caption text (see relevant page)

Settings: vertical, line, position, size, align

  • see relevant page

cue-payload

  • Free text
  • Can be multi-line but no blank lines
  • Can contain defined set of tags (<c>, <v>, <lang>, <b>, <i>, <u>, <HH:MM:SS.sss>, <ruby> - see relevant pages)
  • These characters not allowed: &, <, >
  • text instances of & character to be escaped to &amp;
  • text instances of < character to be escaped to &lt;
  • text instances of > character to be escaped to &gt;

Tags: <c>, <v>, <lang>, <b>, <i>, <u>, <HH:MM:SS.sss>, <ruby>

  • see relevant page
 

comments powered by Disqus

working with webVTT