[時間：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風格換行符
\r\n - 單個LF（0x0A）字符
\r - 單個CR（0x0D）字符
\n
從上述的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" | 取值為百分數，例如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為主，所以在實際應用中還是值得了解下的。