[时间：2019-05] [状态：Open]
[关键词：字幕，vtt，webvtt, 文件格式，cue，css]
0 引言
WebVTT(Web Video Text Tracks)，通过HTML5中的
本文将主要包含以下内容：
- 基本文件格式
- webvtt和srt对比
1 WebVTT文件结构
WebVTT文件是一个以UTF-8编码，以.vtt为文件扩展名的简单文本文件。其MIME类型为text/vtt。 RFC3629。
WebVTT文件的各部分构成及顺序如下：
- 可选的BOM头（BYTE ORDER MARK）
- "WEBVTT"字符串
- 可选的空格字符(0x20, SPACE)或者制表符（0x09，TAB），后面可跟任意数目的非LF/CR(0x0A/0x0D)字符
- 至少两个行结束符
- 0到多个区域定义块（region definition blocks）、样式块（style block）或注释块（comment block）（相邻的块之间使用行结束符分割）
- 0到多个行结束符
- 0到多个cue blocks（提示信息块）和注释块（相邻的块使用行结束符分割）
- 0到多个行结束符
其中行结束符包括以下三种类型：
- 双字符-CRLF (0x0A 0x0D) -- windows风格换行符
- 单个LF（0x0A）字符
- 单个CR（0x0D）字符
从上述的WebVTT基本结构来看，可以通过开头的WEBVTT字符串来判断该文件是否是WebVTT格式。
后续部分将逐个介绍上面提到的各种块结构。
但请注意除了-->和换行之外，你可以在文本头中使用任何的字符。
2 提示信息块 （cue block）
cue是WebVTT文件中最核心的字幕信息块，其具体结构及定义顺序如下：
- 可选的cur标识符以及单个行结束符
- cue时间标记 + 单个行结束符
- 可选的一个或多个空格符或制表符后跟多个cue settings列表
- 单个行结束符
- cue负载：字符串，不可包含任意"-->"子串 + 单个行结束符
- 行结束符
我们基本可以认为一个cue block即是一个独立的subtitle。
cue标识符可以是任意长度的字符，但其中不能包含-->和换行符。并且需要保证该标识符在当前文件内全局唯一，它可在脚本或CSS中直接引用。
cue时间标记的基本格式如下：
[hh:]mm:ss.uuu --> [hh:]mm:ss.uuu
其中hh小时是可选的；mm是分钟数，有效范围[0, 59]；ss是秒数，有效范围[0, 59]；uuu是毫秒数，三位，不足三位前面填充0。"-->"前后可以添加任意数量的空格符或者制表符。
cue settings列表包含一到多个cue setting，相邻的cue setting使用空格或制表符分隔。每个cue setting包含以下组件：
- cue setting名
- 可选的冒号符（0x3A）
- 可选的cue setting值
下表是目前支持的所有cue setting
| 名称 | name | 取值及备注 |
|---|---|---|
| vertical text cue setting | "vertical" | 可取值'rl'或'lr'。日语中常用的文本排版方式垂直排版，用于指定左右起始位置 |
| line cue setting | "line" | 可取值两种： - 可选的字符串值，"start", "center", "end" - 相对值，百分比（20.5%）或行数（-15） |
| position cue setting | "position" | 可取值两种： - 百分比 - 指定类型字符串，"line-left", "center", "line-right" |
| size cue setting | "size" | 百分比 |
| alignment cue setting | "align" | "start", "center", "end", "left", "right" |
| region cue setting | "region" | region标识符 |
cue负载有多重类型，可以是多行，但不能是空行，否则就认为是下一个块了。其中文本支持以下HTML标签：
-
斜体标签()
-
加粗标签()
-
下划线标签()
-
时间戳标签
00:00:18.500 --> 00:00:20.500
Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie
时间戳标签将一句字幕分隔成多个部分，可以用于实现卡拉OK字幕的效果。
典型的cue块内容如下：
hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.
3 注释块
注释是用于对WebVTT文件添加信息的可选组件。注释主要为了阅读文件内容，并不显示给用户。注释可以包括换行符，但不能有空白行即两个连续的换行符，那代表着注释结束。
注释不能包含字符串-–>。
一个注释块由三部分组成：
NOTE字符串- 一个或多个空格/制表符或单个换行符
- 0个或多个字符 + 行结束符，表示注释的内容
- 行结束符
典型的注释块如下：
NOTE
- I didn’t pay too close attention to
when the cues should start or end.
00:01.000 --> 00:04.000
Never drink liquid nitrogen.
NOTE check next cue
4 区域定义块
区域定义块包含以下构成：
- The string "REGION"字符串
- 0或多个空格符或制表符
- 单个行结束符
- region settings列表
- 行结束符
region settings列表包含0到多个下表中的组件，顺序随意，相邻组件使用空格符/制表符/行结束符分割，但字符串中不能出现两个连续行结束符。同时需要确保每个组件最多出现一次。
| 组件名 | 关键字 | 取值及描述 |
|---|---|---|
| region identifier setting | "id" | 可取值任意字符，但不能包含空格符及"-->"子串，例如id:region_left |
| region width setting | "width" | 取值为百分数，例如65.2% |
| region lines setting | "lines" | 取值为整数，例如lines:36 |
| region anchor setting | "regionanchor" | 类坐标点，取值为百分数，例如regionanchor:(9.8%,6.7%) |
| region viewport anchor setting | "viewportanchor" | 类坐标点，取值为百分数，同上 |
| region scroll setting | "scroll" | 目前仅支持"up" |
其具体含义建议参考WebVTT标准文档。
5 样式块
样式块中定了基于CSS的扩展支持。其基本构成如下：
- "STYLE"字符串
- 0到多个空格符或制表符
- 单个行结束符
- 字符序列（可换行，但不能有空行，并且不包含"-->"字符串）。这些字符串表示CSS样式列表，其具体含义在CSS标准中定义
- 行结束符（至少一个空行）
下面是一个示例：
WEBVTT
STYLE
::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */
NOTE comment blocks can be used between style blocks.
STYLE
::cue(b) {
color: peachpuff;
}
hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.
NOTE style blocks cannot appear after the first cue.
上面例子给出了如何用CSS样式来控制对应字幕的显示。
6 SRT与VTT的区别
WebVTT相比SRT有以下不同：
- WebVTT的首行必须是
WEBVTT（在可选的UTF-8 BOM后面） - 在首行和第一个cue之间预留了可选的头数据
- 时间码的分隔符使用点号而不是逗号
- 时间码中的小时是可选的
- 时间码前面的帧序号或标识符是可选的
- 以NOTE开头的都被识别为注释
- 支持JSON格式的Metadata信息
- 可指定Chapter信息
- 仅支持UTF-8
- Cue settings支持自定义的显示位置
7 小结
本文简要整理了WebVTT文件格式的主要构成以及其中几个关键部件。WebVTT跟SRT类似，只是功能上有一定扩展，并且很好的被HTML5支持，在前端开发中也有一定应用。HLS外挂字幕也是以VTT为主，所以在实际应用中还是值得了解下的。