How to Create a Web VTT File for Your Videos

How do you create a Web VTT file for your videos, and why would you need it? First off, this file with the extension of .vtt is called a Web Video Text Track, a known caption and subtitle file format. It was originally created to support HTML5’s text tracks. This VTT file was introduced in 2010 by the WHATWG or Web Hypertext Application Technology Working Group.

The file used to be called WebSRT and shared the same file extension as the file format where it was based, the SubRip (.srt). It was later reintroduced with the tag for HTML5 and its current name WebVTT.

WebVTT vs. SRT

What are the differences between SRT and Web VTT files? Here’s a look at the main differences between the two files:

• A VTT file can support frame placement and other additional information
• An SRT file does not require a UTF-8 encoding that a VTT file needs
• Instead of commas, the timecodes in a VTT file are separated by full stops
• Cue identifiers are optional in WebVTT. On the other hand, cue identifiers separate the frames in an SRT file
• The first caption sequence of an SRT file begins with a “1,” while all WebVTT files start with the “WebVTT” line
• WebVTT allows metadata information and description to be placed with the frames, which is not permitted in an SRT format

The Components of a WebVTT File

This file has a number of optional components. But it has two requirements, such as:

• In between each caption frame is a blank line indicating the sequence’s end
• Each transcript begins with WBVTT

Here are the optional components of a VTT file:

• Information is positioned on the same line after the second timecode
• Sequence number to ensure the organization of captions
• The comments appear on separate lines and indicated by NOTE
• On the right of the WEBVTT is a header. You can use “– –>” to describe the file, and there must be a single space between
• To tell the reader the file is encoded with UTF-8, there has to be a BOM or byte order mark, such as EF BB BF

For the time format, you can use hours:minutes:seconds.milliseconds or minutes:seconds.milliseconds. You will find a timecode at the beginning of each sequence. This “– –>” separates each timestamp. The milliseconds used for the time format are rounded off to three decimal places. The start of a caption can be indicated by a hyphen.

Ensure that your caption sequence does not have any blank lines. This is because a blank line is only used to separate the captions in varying timecodes, and it indicates a sequence’s end.

You can add comments, which the end-user will not see. You can use them as reminders within the file or as a file description. You always need to begin it by NOTE, then a new line or space. Make sure that there is no blank line between a single comment, just like how you do it with a sequence. A comment can have as many characters as you need.

Creating a Web VTT File

The steps to creating a VTT file depend on the operating system you’re using.

For Windows users:

1. On Notepad, click open a new file.
2. Type WEBVTT and press enter two times to make a blank line.
3. Use the proper formatting to enter its beginning and end for the timecode. For example: 00:00.000 –> 00:05.550
4. If you’re adding a sequence indicator, place it on a separate line on top of the timecodes. Hit enter. You can also add cue settings by adding a space between the second timecode; then, you can add alignment, size, position, and other details.
5. Start the captions in the following line. Make the captions easy to read. Stick to two lines each with a 32-character limit
6. Press enter two times after the sequence’s last text line. Leave a blank line for the next sequence of caption
7. Repeat everything until you are done with the transcript.
8. Click File on top of the Notepad and choose Save. When prompted to add a filename, add the transcript’s name, use the extension “.vtt,” and click All Files under the Save as type. Click Save.

For Mac users:

1. On TextEdit, click open a new file.
2. Follow steps 2 to 6 of the tutorial for Windows users.
3. Go to Format and save the file as .vtt. You can use Shift + Command + T or Make Plain Text. Click File and then Save. Type the name of the file under Save As and use .vtt instead of .txt.
4. Remove checks, if there are any, to “If no extension is provided, use .txt” and “Hide Extension.”
5. Click Save.

After saving the file, your captions are ready to get uploaded.

Uploading a VTT file depends on the video recording software, lecture capture software, or media player you use. There are varying techniques for uploading a VTT file to different platforms, such as YouTube, Video.js, MediaPlatform, MediaCore, JW Player, Brightcove, or Vimeo.

Final Thoughts

As explained above, creating a VTT file takes time due to the timecodes and other elements you need to include. Finishing a video caption will depend on the length of a video and your experience in transcribing.

For example, a 5-minute video can take about 30 minutes to finish transcribing if you are experienced. It will take longer if this is your first time and much longer if you are adding cue settings or your own timecodes through a VTT file.

If you are not in a hurry or have a tight budget, this is okay. However, if it’s for your business or professional work, it is best to get a captioning service, such as GoTranscript, to ensure high-quality of the final caption.

When you leave it to the pros, your caption will have a high accuracy rate, and the final work will be compliant with the rules. You will also be relieved of getting the timecodes on your own.