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.
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 :
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 :
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
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.
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);
}
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.
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]
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. */
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.
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.
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.
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.
