WebVTT subtitle file : everything you need to know

Jean-Marc
July 23, 2024

Translate your videos faster.
Try the Subtitles and Dubbing AI-platform.

From punctuation and subtitle hyphenation to voice and translation quality,
get professional results.

It turns out that the WebVTT format is the perfect answer to overcome these shortcomings.

We'll show you why you should use .vtt files and how you can generate them easily.

Why use a WebVTT file vs SRT file ?

Created in 2010 by the Web Hypertext Application Technology Working Group (WHATWG) community of HTML developers, the WebVTT format aims to improve the tracking of text data on HTML5.

From the beginning, this type of file has been thought of as a more elaborate alternative to the SRT format, having even been named "WebSRT" before being changed to "WebVTT".

Although it is still under development and acceptance by the W3C organization, it is now readable by almost all browsers (Google Chrome, Safari, …) video players (Vimeo, JW player, BrightCove …) and social media (Youtube).

So why use a .vtt file instead of .srt file? Well, it has a number of better features :

  • You can add HTML tags to manage the formatting of your text (bold, highlight, italic): <b text /b>
  • Customize the positioning and size of the display of your subtitles: size: 50%
  • Indicate the name of the speakers with the tag <v /v>
  • Adding metadata and comments to make your work more collaborative : NOTE
  • Displaying your text in a more progressive way with the addition of more precise time codes <00:19.000> in the sequence (interesting for a karaoke version)
  • Compatible with a more advanced CSS customization (colors, subtitle font if you implement your video on your website

How to Structure a WebVTT File

Structuring a WebVTT file is straightforward but requires attention to detail. Here’s a step-by-step guide to help you create your own WebVTT file​ :

1. Header

Start your file with the keyword “WEBVTT” on the first line. This tells any text editor and video player that the file is using the WebVTT format. Optionally, you can add metadata or settings in the header, such as styling information or language preferences.

Example:

WEBVTT

2. Cues

Cues are the individual subtitle segments. Each cue starts with a timestamp indicating the start and end times, followed by the text content. Timestamps must be in the format hours:minutes:seconds.milliseconds --> hours:minutes:seconds.milliseconds. After the timestamps, add the subtitle text. Each cue is separated by a blank line​.

Example:

00:00:05.000 --> 00:00:10.000
This is the first subtitle.

00:00:15.000 --> 00:00:20.000
This is the second subtitle.

3. Styling

You can include a style block in the header to define global styles for all cues. Use the “::cue” selector to apply these styles. This allows you to customize the appearance of your subtitles, such as changing the font, color, and background​

Example:

STYLE
::cue {
   font-family: Arial;
   color: #FFFFFF;
   background: rgba(0, 0, 0, 0.8);
}

4. Comments and Metadata

Add comments or metadata using the “NOTE” keyword. These notes won’t appear in the final video but can be helpful for collaborators or for keeping track of changes​​.

Example.

NOTE
This is a comment for the subtitle editor.

5. Accessibility Features

WebVTT supports features like audio descriptions and non-speech sound representations, making your content accessible to users with disabilities. This can include text descriptions of sound effects or actions that are important for understanding the video content​.

Example:

00:30:00.000 --> 00:32:00.000
[Sound of a door opening]

Example of WebVTT File

Here’s a complete example of a WebVTT file with annotations. You can easily copy and paste this code and fill in your own subtitles :

WEBVTT

STYLE
::cue {
   font-family: Arial;
   color: #FFFFFF;
   background: rgba(0, 0, 0, 0.8);
   text-shadow: 1px 1px 2px #000000;
}


/* The STYLE block defines global styles for all cues, such as font, color, and background.
  */

NOTE
This is a comment for the subtitle editor. It will not appear in the final video.

/* Comments and metadata can be added using the NOTE keyword. These are not displayed in the video. */

1
00:00:05.000 --> 00:00:10.000
Hello, and welcome to our video!

/* This is the first cue. The timestamps indicate the start and end times.
 */

/* Continue adding cues in the same format as needed for your video. */

Using an Automated WebVTT Generator

Creating WebVTT files manually can be time-consuming, especially if your video is long or has complex subtitles. Using an automated WebVTT generator can save you a lot of time and effort. Here’s how you can do it using Checksub, an advanced subtitling tool​​.

1. Upload Your Video

Start by uploading your video to the Checksub interface. This can be done easily through their user-friendly platform. Just click the upload button and select your video file from your computer​. Once your video is uploaded, you need to choose the original language of your video content. If you want to translate the subtitles into other languages, you can select those languages at this stage. Checksub supports a wide range of languages, making it a versatile tool for global audiences​.

2. Generate the Subtitles

Checksub will automatically generate a transcript of your video. This is done using advanced speech recognition technology, ensuring high accuracy. The automatic transcription process is quick, allowing you to proceed with editing almost immediately​.

After the transcript is generated, you can review and edit it. Checksub’s online subtitle editor is intuitive and easy to use. You can cut sentences into smaller segments, correct any errors, and adjust the synchronization of the subtitles. This step ensures that your subtitles are accurate and match the audio perfectly​.

3. Export in WebVTT Format

Once you’re satisfied with the transcript, you can export the subtitles in WebVTT format. Checksub allows you to download the file directly from the platform. This WebVTT file can then be used with your video on various platforms.Universally supported, SRT is a widely used subtitling format in the world. Yet it does not code a lot of your subtitles' information.

Share this post

Join 400+ companies translating their videos
with Checksub.

Free trial
AI-powered Dubbing and Subtitle generator
+200 languages supported
MacBook mockup
Desk with computer
Explore topics
Trendy Articles

Netflix Dubbing : Everything You Need to Know

You want to know what the dubbing process looks from the inside at Netflix ? Here's your guide.
Jean-Marc
24 Mar 2023
5
minute read

Dubbing Studio Equipments : The Essentials 

You want to know what equipments you need to dubbing ? Here's a complete guide.
Jean-Marc
24 Mar 2023
5
minute read

How to Add Dynamic Captions to Your Video in 3 steps

You want to add animated subtitles to your video ? Here's how you can do it.
Jean-Marc
24 Mar 2023
5
minute read