UT Shield

College of Fine Arts Web Instruction | College of Fine Arts | University of Texas At Austin

University of Texas At Austin

webVTT files for video subtitling

What is a webVTT file?

A WebVTT or Web Video Text Track is a file format for displaying timed text, such as subtitles, captions and audio description for video content on the internet. The file type can be added to a  video file in the HTML code or added to a Vimeo or YouTube video.

Create Your File

Create the WebVTT file in your favorite text editor (for example TexEdit on  Mac).  To get started, you can copy one of  the examples below into your file and update the timecode and text to be appropriate for your video. When you are finished, save your file as a plain text file, with the extension .txt. Then change the file’s extension from .txt to .vtt.

Basic File Components

Required first line of a webVTT file

A basic WebVTT file needs to start with the string WEBVTT at the top of your document.

Cues

Each webVTT contains block(s) called cues and each cue block contains three things:

  1. The actual text to be displayed in your video. See Tips for Writing Captions & Audio Description
  2. The order of your text.
  3. Where in your video’s timeline your text is to be displayed.
Cue Syntax

A basic Cue contains four things:

  1. A cue identifier to help you organize your captions, such as sequential numbers or letters.
  2. Time code outlining hours, minutes, seconds and millli-seconds rounded to three digits.
  3. The actual text that is displayed on the screen.
  4. There needs to be a blank line in between each subtitle block.

NOTE that you can have multiple captions in a single time range.

Optional header

To help you visually organize multiple VTT files, an optional header can be added to the left of the initial WEBVTT string. The only character restriction is that your header cannot contain the following string of characters, which is reserved for cues only:

--->

So, if you are going to use a header it is best to just give it a dash as demonstrated below.

Examples

Basic WebVTT file and Cue Syntax

WEBVTT

1 
00:01.000 --> 00:04.000 Several clips from recent productions, events and courses.

2 
00:05.000 --> 00:09.000 Music from Symphony No. 2 for Wind Ensemble

3 
00:10.000 --> 00:12.000 Movement, creativity and energy throughout the department.

Basic WebVTT file and Cue Syntax with Optional Header

WEBVTT -En Vogue, My Lovin' (You're Never Gonna Get It), Funky Divas, 1992

1 
00:01.000 --> 00:04.000
Now you promise me the moon and stars 

2 
00:05.000 --> 00:09.000
Save your breath, you won't get very far (Oooh, bop..)

Advanced Time Code Settings

Using the following method you can get very specific with where in your video’s timeline you’d like specific text to appear.

WEBVTT
1
00:00:00.000 --> 00:00:07.000
This <00:00:01.000>text <00:00:02.000>will <00:00:03.000>appear <00:00:04.000>over <00:00:05.000>6 <00:00:06.000>seconds.

Styles & Questions

The style of the text on the screen can be set in the cue block but most styles will be determined by the website style guides and the CSS for your website. If you would like to change the styles or have questions about getting started with WebVTT files, please contact your College of Fine Arts Web Team at cofawebmaster@austin.utexas.edu.

×