What Is WebVTT?
WebVTT (Web Video Text Tracks Format) is a text-based subtitle format used to add timed text tracks to videos. It is the official format supported by HTML5 through the <track>
element, allowing you to add:
- Subtitles (translated speech)
- Captions (speech and sound effects)
- Descriptions (visual information for screen readers)
- Chapters (navigable points in the video)
- Metadata
Basic Structure of WebVTT
- A WebVTT file consists of:
- An optional header (
WEBVTT
). - Optional metadata (comments or style/script blocks).
- Cues (text segments with timing and payload).
- An optional header (
1. Cue Format
A cue has the following structure:
[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...
- Timing: Start & end times in
HH:MM:SS.mmm
format. - Settings (optional):
vertical
(lr/rl for vertical text)line
(positioning)position
(horizontal alignment)size
(width/percentage)align
(start/middle/end)
2. Cue Payload
- Can be plain text or include markup:
- Tags:
<b>
,<i>
,<u>
,<ruby>
,<lang>
, etc. - Timestamps (
<00:00:05.000>
) for karaoke-style text.
- Tags:
3. Styling & CSS
- Styling can be applied via:
- Inline cues (using tags).
- CSS pseudo-elements (
::cue
,::cue-region
) in HTML.
4. Metadata Tracks
- WebVTT can carry metadata (JSON, etc.) for interactive applications.
5. File Encoding
- Must be UTF-8 encoded.
- Lines end with
\r\n
,\n
, or\r
.
6. Processing Rules
- Parsers must handle malformed files gracefully.
- BOM (Byte Order Mark) is optional.
7. HTML5 Integration
- Used with
<track>
element:<video> <track src="subtitles.vtt" kind="subtitles" srclang="en" default> </video>
kind
can besubtitles
,captions
,descriptions
,chapters
, ormetadata
.
8. Browser Support
- Widely supported in modern browsers (Chrome, Firefox, Safari, Edge).
9. Use Cases
- Subtitles/Captions for accessibility.
- Karaoke lyrics with timed text.
- Chapter navigation in videos.
- Metadata for interactive video apps.
Example of a WebVTT File:
WEBVTT
00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.
00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.
Search engines can’t “watch” your video—but they can read text-based content. By using WebVTT files, you add indexable text that:
- Improves discoverability: Google can index captions and transcripts, making your videos appear in more search results.
- Increases engagement: Subtitled videos keep users engaged longer—boosting session duration and reducing bounce rates.
- Enhances accessibility: Captioning is essential for users who are deaf or hard of hearing, and it’s favored in SEO ranking algorithms.
When a WebVTT file is associated with a video on a webpage, Google can parse and understand that timed text, making the content more relevant for certain queries.
How to Add WebVTT to an HTML5 Video
You can include a WebVTT file in your video using the <track>
element:
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
src
: Path to your.vtt
filekind
: Type of text track (subtitles
,captions
,chapters
, etc.)srclang
: Language code (e.g.,en
,es
)label
: Track label shown in player
WebVTT vs SRT: What’s the Difference?
Feature | WebVTT | SRT (SubRip) |
---|---|---|
Format | Used in HTML5 video | Used in video editing tools |
Styling | Supports CSS styling | No native styling |
Metadata | Supports cue metadata | Not supported |
Compatibility | Widely supported in browsers | Supported in players like VLC |
Tools to Create and Edit WebVTT Files
You can create or edit .vtt
files using:
- Text Editors: VS Code, Sublime Text
- Subtitle Editors: Subtitle Edit, Amara, Aegisub
- Converters: Use tools to convert SRT to VTT and vice versa
How to open WebVTT file?
To open a WebVTT (.vtt) file, you can use any text editor or subtitle editor.
Open in a Text Editor
- Windows: Notepad, Notepad++, VS Code
- macOS: TextEdit, Sublime Text
- Linux: Gedit, nano, Vim
Since
.vtt
files are plain text, you can view and edit them like any regular text file.
Open in a Subtitle Editor
For better formatting, preview, and syncing:
- Subtitle Edit (Windows)
- Aegisub (cross-platform)
- Amara (web-based)
Open in a Browser
- Create a simple HTML file with a
<video>
and<track>
tag. - Open the HTML file in a browser to view the video with subtitles.