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)

語音标簽()

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?
           

1. 多重字幕

   可以用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支援自定義的顯示位置