How to Create a VTT File in 3 Simple Steps

Web video, in particular, is a great way to increase sales, improve search engine rankings and increase leads for your business. If you’re thinking about adding video to your website, then you’re probably wondering about how to create a Web Video Text Tracks file VTT. VTT files can be used in different web video players and help to enhance the accessibility of web videos for people with disabilities or for those browsing without sound. In this post, I’ll show you how to quickly create VTT files and also cover the simple way to link subtitles to your web videos.

What is a VTT file, and why it’s useful?

VTT stands for Video Text Track, which is a time-based format for displaying subtitles, captions, and other timed text for video. These files are also known as WebVTT files. The time-based format allows for precise timing of the text. It’s far more accurate than the old SRT format which was based on frame rates. Also, the WebVTT format can support additional information, such as frame placement, video file description, comments, etc.

Sample WebVTT caption file

A VTT file consists of the following parts, some of them are optional:

1. The header: WEBVTT string.
2. An optional text header to the right of WEBVTT . You could use this to add a description to the file.
3. Comments: indicated by NOTE and on separate lines.
4. The number in sequence of the caption frame.
5. Beginning and end timecodes for when the caption frame should appear. The time format used is hours:minutes: seconds.milliseconds, with the milliseconds, rounded to 3 decimal places.
6. Optional styling and frame placement, e.g. align: middle line: 80% . You can style WebVTT cues within CSS or within the WebVTT file itself.
7. The caption text itself.
8. A new line indicating the start of a new sequence of the captions.

How to create a WebVTT file

Here’s how to easily create VTT files:

1. Use automatic transcription software to transcribe video to text. The speech-to-text transcription tool will take your video file and convert the spoken words to written text. The automatic transcription process usually takes half of the video file length to transcribe a file completely. When the transcription process has finished, you can download the subtitle file in VTT format. This file will be the first draft. Also, you may use the online editor to verify automatic speech recognition results and correct the transcript where needed.
2. If you want to add styles to your VTT file, download and install Subtitle Workshop software. Subtitle Workshop is a free subtitle editor, used to create and edit VTT files. With its help, you can create subtitles for movies, videos, TV shows, and other multimedia files. You can also use it to synchronize the audio with the video and edit existing subtitles.
3. Upload the VTT file created in step 1 into Subtitle Workshop program. It supports converting between, creating, opening, editing, and saving over 60 (currently) subtitle formats, as well as saving subtitles in a custom user-defined file format. Now you can easily add styles for your transcript. Subtitle Workshop supports different formatting options. Features include bold and italic text, color tags for tagged phrases within the subtitle.

How to add VTT subtitles to HTML5 videos

WebVTT can be used with HTML5 video. Developers of HTML5 web pages can use WebVTT files to provide captions or subtitles through the use of the video HTML tag. Here is the example HTML code for adding captions and subtitles to HTML5 video:

<video id="test" class="test-video" controls="" preload="metadata">
    <source src="test.mp4" type="video/mp4">
    <track label="English subtitles" kind="subtitles" srclang="en" src="subtitles-en.vtt" default="">
</video>

Now you know how to create VTT subtitles and can apply it to your personal or business projects. Thanks a lot for reading!