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.
Each webVTT contains block(s) called cues and each cue block contains three things:
- The actual text to be displayed in your video. See Tips for Writing Captions & Audio Description
- The order of your text.
- Where in your video’s timeline your text is to be displayed.
A basic Cue contains four things:
- A cue identifier to help you organize your captions, such as sequential numbers or letters.
- Time code outlining hours, minutes, seconds and millli-seconds rounded to three digits.
- The actual text that is displayed on the screen.
- There needs to be a blank line in between each subtitle block.
NOTE that you can have multiple captions in a single time range.
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.
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.
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 email@example.com.