WebVTT 字幕

0 引言
WebVTT(Web Video Text Tracks)，通过HTML5中的元素来标记额外的文字轨资源。其早期版本是基于SRT格式的，轻量级、基于XML的标准，故又名WebSRT(Web Subtitle Resource Tracks)。在2011年改为WebVTT，并在HTML5草案报告中发布。目前WebVTT标准依然是处于草案阶段，但其基本功能已被多数浏览器支持。

<video controls autoplay src="video.webm">
 <track default src="track.vtt">
</video>

HLS中字幕流默认都是WebVTT格式，可外挂多国字幕，简单方便，并支持被HTML5所支持。

1 WebVTT文件结构
WebVTT文件是一个以UTF-8编码，以.vtt为文件扩展名的简单文本文件。其MIME类型为text/vtt。 RFC3629。
WebVTT文件的各部分构成及顺序如下：

• 可选的BOM头（BYTE ORDER MARK）
• "WEBVTT"字符串
• WEBVTT 右侧的可选文本标题。
  • WEBVTT 后必须至少有一个空格。
  • 您可以使用它向文件添加描述。
  • 您可以在文本标题中使用除换行符或字符串“–>”之外的任何内容。
• 一个空行，相当于两个连续的换行符。
• 零个或多个cue或备注。
• 零个或多个空行。

示例 1 - 最简单的 WebVTT 文件

WEBVTT

示例 2 - 带有头部的非常简单的 WebVTT 文件

WEBVTT - This file has no cues.

示例 3 - 带有头部和cue的常见 WebVTT 示例

WEBVTT - This file has cues.

14
00:01:14.815 --> 00:01:18.114
- What?
- Where are we now?

15
00:01:18.171 --> 00:01:20.991
- This is big bat country.

16
00:01:21.058 --> 00:01:23.868
- [ Bats Screeching ]
- They won't get in your hair. They're after the bugs.

Text前加- 可以表示不同人说话
2 cue 块 （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
  
  
  默认Line

Line: 3%

vertical:lr line:3%

vertical:lr line:97%


Cue settings

00:00:05.000 --> 00:00:10.000
00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end

cue负载有多重类型，可以是多行，但不能是空行，否则就认为是下一个块了。其中文本支持以下HTML标签：

• 斜体标签(text)
• 加粗标签(text)
• 下划线标签(text)
• 注音标签(text)
• 注音文本标签(text)

<ruby>東京<rt>とうきょう</rt></ruby>

语音标签()

WEBVTT

STYLE
::cue(v[voice="Esme"]) {
color: cyan;
}
::cue(v[voice="Mary"]) {
color: pink;
}

00:00.000 --> 00:02.000
<v Esme>It’s a blue apple tree!

00:02.000 --> 00:04.000
<v Mary>No way!

• 时间戳标签
  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块内容如下：

Class tag
通过class tag使用样式
3 注释块NOTE
注释是用于对WebVTT文件添加信息的可选组件。注释主要为了阅读文件内容，并不显示给用户。注释可以包括换行符，但不能有空白行即两个连续的换行符，那代表着注释结束。
注释不能包含字符串-–>。
一个注释块由三部分组成：

1. NOTE字符串
2. 一个或多个空格/制表符或单个换行符
3. 0个或多个字符 + 行结束符，表示注释的内容
4. 行结束符
   示例 4 - 常见的 WebVTT 示例

NOTE This is a comment

示例 5 - 多行注释

NOTE
One comment that is spanning
more than one line.

NOTE You can also make a comment
across more than one line this way.

示例 6 - 常见注释用法

WEBVTT - Translation of that film I like

NOTE
This translation was done by Kyle so that
some friends can watch it with their parents.

1
00:02:15.000 --> 00:02:20.000
- Ta en kopp varmt te.
- Det är inte varmt.

2
00:02:20.000 --> 00:02:25.000
- Har en kopp te.
- Det smakar som te.

NOTE This last line may not translate well.

3
00:02:25.000 --> 00:02:30.000
- Ta en kopp

4 区域定义块
区域定义块包含以下构成：

1. The string "REGION"字符串
2. 0或多个空格符或制表符
3. 单个行结束符
4. region settings列表
5. 行结束符
   region settings列表包含0到多个下表中的组件，顺序随意，相邻组件使用空格符/制表符/行结束符分割，但字符串中不能出现两个连续行结束符。同时需要确保每个组件最多出现一次。
   
   5 样式块
   样式块中定了基于CSS的扩展支持。其基本构成如下：
6. "STYLE"字符串
7. 0到多个空格符或制表符
8. 单个行结束符
9. 字符序列（可换行，但不能有空行，并且不包含"–>"字符串）。这些字符串表示CSS样式列表，其具体含义在CSS标准中定义
10. 行结束符（至少一个空行）
    示例：

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.

在这里，所有视频元素的样式都使用灰色线性渐变作为背景，前景色为“papayawhip”。 此外，使用 元素加粗的文本颜色为“peachpuff”。
也可以使用识别符定义样式

WEBVTT

STYLE
::cue(#\31) { color: lime; }
::cue(#crédit\ de\ transcription) { color: red; }

hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.
NOTE style blocks cannot appear after the first cue.

还支持文本轨道的定位，通过在提示中的计时之后包含定位信息，如下所示（有关更多信息，请参阅提示设置）：

WEBVTT

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
Where did he go?

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?

6. 多重字幕
   可以用class实现两个语言字幕

WebVTT

STYLE
::cue(sub-lang) {
// 指定副字幕的字体大小，位置，样式
}
00:00.000 --> 00:02.000
这是一株蓝苹果树！
<c.sub-lang> It’s a blue apple tree!

SRT与VTT的区别
WebVTT相比SRT有更丰富的结构和样式：

• WebVTT的首行必须是WEBVTT（在可选的UTF-8 BOM后面）
• 在首行和第一个cue之间预留了可选的头数据
• 时间码的分隔符使用点号而不是逗号
• 时间码中的小时是可选的
• 时间码前面的帧序号或标识符是可选的
• 以NOTE开头的都被识别为注释
• 支持JSON格式的Metadata信息
• 可指定Chapter信息
• 仅支持UTF-8
• Cue settings支持自定义的显示位置