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).

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.

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 be subtitles, captions, descriptions, chapters, or metadata.

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 file
• kind: 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?

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

1. Create a simple HTML file with a <video> and <track> tag.
2. Open the HTML file in a browser to view the video with subtitles.

References

• WebVTT: The Web Video Text Tracks Format