什么是 WebVTT？

WebVTT (Web Video Text Tracks Format) 是一种 基于文本的字幕格式，用于向视频添加定时文本轨道。它是 HTML5 通过 <track> 元素支持的官方格式，允许您添加：

  • 字幕（翻译后的语音）
  • 说明（语音和音效）
  • 描述（为屏幕阅读器提供的视觉信息）
  • 章节（视频中的可导航点）
  • 元数据

WebVTT 的基本结构

  • WebVTT 文件由以下部分组成：
    • 可选的 头部 (WEBVTT)。
    • 可选的 元数据（注释或样式/脚本块）。
    • 提示（Cue）（带时间和内容的文本段）。

1. 提示格式

提示的结构如下：

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...
  • 时间：以 HH:MM:SS.mmm 格式表示的开始和结束时间。
  • 设置（可选）：
    • vertical（垂直文本的 lr/rl）
    • line（定位）
    • position（水平对齐）
    • size（宽度/百分比）
    • align（起始/中间/结束）

2. 提示内容

可以是纯文本或包含标记：

  • 标签：<b>、<i>、<u>、<ruby>、<lang> 等。
  • 时间戳（<00:00:05.000>）用于卡拉OK 风格的文本。

3. 样式与 CSS

可以通过以下方式应用样式：

  • 内联提示（使用标签）。
  • HTML 中的 CSS 伪元素（::cue、::cue-region）。

4. 元数据轨道

WebVTT 可以携带 元数据（JSON 等），用于交互式应用。

5. 文件编码

  • 必须采用 UTF-8 编码。
  • 行结束符可以是 \r\n、\n 或 \r。

6. 处理规则

  • 解析器必须能够优雅地处理格式错误的文件。
  • BOM（字节顺序标记）是可选的。

7. HTML5 集成

使用 <track> 元素：

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>
  • kind 可以是 subtitles、captions、descriptions、chapters 或 metadata。

8. 浏览器支持

在现代浏览器中得到广泛支持（Chrome、Firefox、Safari、Edge）。

9. 使用场景

  • 字幕/说明 用于可访问性。
  • 卡拉OK 歌词，带定时文本。
  • 章节导航，在视频中。
  • 元数据，用于交互式视频应用。

WebVTT 文件示例： 

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.

搜索引擎无法“观看”您的视频，但它们可以读取 基于文本的内容。通过使用 WebVTT 文件，您可以添加 可索引的文本，其作用如下：

  • 提升可发现性：Google 可以索引字幕和转录，使您的视频出现在更多搜索结果中。
  • 增加参与度：带字幕的视频能让用户更长时间参与——提升会话时长并降低跳出率。
  • 提升可访问性：字幕对聋人或听力受限的用户至关重要，并且在 SEO 排名算法中受到青睐。

当 WebVTT 文件与网页上的视频关联时，Google 可以解析并理解这些定时文本，从而使内容对特定查询更具相关性。

如何将 WebVTT 添加到 HTML5 视频

您可以使用 <track> 元素在视频中包含 WebVTT 文件：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
  • src：指向您的 .vtt 文件的路径
  • kind：文本轨道的类型（subtitles、captions、chapters 等）
  • srclang：语言代码（例如 en、es）
  • label：在播放器中显示的轨道标签

WebVTT 与 SRT：有什么区别？

功能WebVTTSRT（SubRip）
格式用于 HTML5 视频用于视频编辑工具
样式支持 CSS 样式不支持原生样式
元数据支持提示元数据不支持
兼容性在浏览器中得到广泛支持在 VLC 等播放器中受支持

创建和编辑 WebVTT 文件的工具

您可以使用以下工具创建或编辑 .vtt 文件：

  • 文本编辑器：VS Code、Sublime Text
  • 字幕编辑器： Subtitle Edit、Amara、Aegisub
  • 转换工具：使用工具将 SRT 转换为 VTT，或反向转换

如何打开 WebVTT 文件？

要打开 WebVTT（.vtt）文件，您可以使用任何 文本编辑器 或 字幕编辑器。

在文本编辑器中打开

  • Windows：记事本、Notepad++、VS Code
  • macOS：TextEdit、Sublime Text
  • Linux：Gedit、nano、Vim

由于 .vtt 文件是纯文本，您可以像编辑普通文本文件一样查看和编辑它们。

在字幕编辑器中打开

  • Subtitle Edit（Windows）
  • Aegisub（跨平台）
  • Amara（基于网页）

在浏览器中打开

  1. 创建一个包含 <video> 和 <track> 标签的简单 HTML 文件。
  2. 在浏览器中打开该 HTML 文件，以查看带字幕的视频。

ASS 文件的关键特性

特性描述
文件扩展名.vtt
全称Web Video Text Tracks Format
MIME 类型text/vtt
格式类型带结构化标记的纯文本文件
主要软件任何文本编辑器、HTML5 视频播放器、字幕创作工具
编码必须为 UTF-8
开发者W3C（万维网联盟）和 WHATWG
主要优势原生浏览器支持、丰富的定位和样式选项、可访问性特性
宏支持无（仅文本格式，带标记标签）
开放标准是（W3C 社区组规范）

常见问题

问1：WebVTT 与 SRT 有何区别？
答：WebVTT 基于 SRT，但增加了关键功能，如文本定位、语音标签、CSS 样式和元数据支持，并且原生集成于 HTML5 视频。

问2：如何将 WebVTT 字幕添加到 YouTube？
答：在为视频添加字幕时上传您的 .vtt 文件，或使用 YouTube 的自动字幕功能并下载生成的 WebVTT 文件进行编辑。

问3：WebVTT 文件可以包含图像吗？
答：WebVTT 规范并不直接支持嵌入图像，但您可以使用带有 URL 的元数据提示，并通过 JavaScript 实现自定义图像渲染。

问4：为什么我的 WebVTT 样式没有生效？
答：检查 STYLE 块是否出现在第一个提示之前，且没有空行，并正确使用 ::cue 伪元素。同时确认浏览器兼容性。

问5：WebVTT 文件能在像 HLS 这样的流媒体协议中使用吗？
答：可以，HLS（HTTP 实时流媒体）支持分段的 WebVTT，以在视频内容旁高效流式传输字幕。

参考文献