WebVTT 及 HTML5 元素簡介

https://dev.opera.com/articles/zh-cn/an-introduction-to-webvtt-and-track/

簡介

網絡視頻文本軌道，簡稱為 WebVTT， 是一種用於標記文本軌道的文件格式。它與 HTML5 <track> 元素相結合，可給音頻／視頻等媒體資源添加字幕，標題和其他描述信息，並同步顯示。

給媒體文件添加文本信息，是為了讓媒體面向更多的人群，使其容易訪問。如有聽覺障礙的人，或者更普遍地說，不熟悉這門語言的觀眾。

這篇文章將介紹 WebVTT 文件格式，其設置選項，以及如何和 HTML5 <track> 元素結合使用，來給視頻文件添加字幕。

文件格式

WebVTT 文件是一個以 UTF-8 為編碼，以 .vtt 為文件擴展名的簡單文本文件。它遵循由 W3C 規范 所定義的特定格式。聽起來很難，你需要學習一門新的文件格式，其實不用擔心，VTT 文件格式被精心設計得很簡單。

注意：若要在你的服務器上使用 WebVTT 文件，你可能需要顯性定義其內容類型，例如，在Apache服務器的 .htaccess 文件中加入：

<Files mysubtitle.vtt> ForceType text/vtt;charset=utf-8 </Files> 

WebVTT文件的頭部按如下順序定義：

1. 可選的 字節順序標記（BOM）
2. 字符串 WEBVTT
3. 一個空格（Space）或者制表符（Tab），后面接任意非回車換行的元素
4. 兩個或兩個以上的 “WEBVTT 行結束符” ：回車 \r，換行 \n，或者同時回車換行 \r\n

示例如下：

WEBVTT Cue-1 00:00:15.000 --> 00:00:18.000 At the left we can see... 

接下來我們來談如何定義文本內容，這也是比較重要的一點。

WebVTT Cues

WebVTT 文件包含一個或多個 “WebVTT Cues”, 各個之間用兩個或多個 WebVTT 行結束符 分隔開來。

WebVTT Cue 允許你指定特定時間戳范圍內的文字（如字幕）。你也可以給 WebVTT Cue 指定一個唯一的標識符，標識符由簡單字符串構成，不包含 --> ，也不包含任何的 WebVTT 行結束符。每一個提示采用以下格式：

[idstring] [hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms Text string 

標志符是可選項，可有可無，然而我們建議加入，因為它能夠幫助組織文件，也方便腳本操控。

時間戳遵循一個標准格式：小時部分[hh:]是可選的，毫秒和秒用一個點 . 分離，而不是冒號 : 。時間戳范圍的后者必須大於前者。對於不同的 Cues，時間戳可以重疊，但在單個 Cue 中，你不能有字符串 --> 或兩個連續的行結束符。

時間范圍后的文字可以是單行或者多行。特定的時間范圍之后的任何文本都與該時間范圍匹配，直到一個新的 Cue 出現或文件結束。

以下是一些 WebVTT cue 的例子：

Cue-8 00:00:52.000 --> 00:00:54.000 I don’t think so. You? Cue-9 00:00:55.167 --> 00:00:57.042 I’m Ok. 

接下來我們看看如何用 WebVTT cue 的設置選項來定義 Cue 的特性。

WebVTT Cue 設置

在時間范圍值后面，可以為 Cue 做設置：

[idstring] [hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings] Text string 

這些 Cue 的設置能夠定義文本的位置和對齊方式，設置選項如下：

設置	值	功能說明
vertical	rl || lr	將文本縱向向左對齊 （lr） 或向右對齊 （rl） （如：日文的字幕）
line	[-][0 or more]	行位置，負數從框底部數起，正數從頂部數起
	[0-100]%	百分數意味着離框頂部的位置
position	[0-100]%	百分數意味着文字開始時離框左邊的位置（如：英文字幕）
size	[0-100]%	百分數意味着 cue 框的大小是整體框架寬度的百分比
align	start || middle || end	指定 cue 中文本的對齊方式

注意：如果沒有設置 Cue 選項，默認位置是底部居中。

讓我們用一個例子來看這些設置如何使用：

Cue-8 00:00:52.000 --> 00:00:54.000 align:start size:15% I don’t think so. You? Cue-9 00:00:55.167 --> 00:00:57.042 align:end line:10% I’m Ok. 

在這個例子里，”Cue-8” 將靠左對齊，文本框大小為15%，而 “Cue-9” 靠右對齊，縱向位置距離框頂部10%。

WebVTT Cue 內聯樣式

除此之外，你可以用 “WebVTT Cue 內聯樣式” 來給實際 Cue 文本添加樣式。這些內聯樣式類似於 HTML 元素，可以用來添加語義及樣式。可用的內聯樣式如下列出：

值	說明
c	用 c 定義 （CSS）類, 例如， <c.className>Cue text</c>
i	斜體字
b	粗體字
u	添加下划線
ruby	定義類似於 HTML5 的 <ruby> 元素。在這樣的內聯樣式中，允許出現一個或多個 <rt> 元素。（<ruby> 元素用於標注漢字等東亞字符的發音）
v	如有提供，則用來指定聲音標簽。例如， <v Ian>This is useful for adding subtitles</v>。注意此聲音標簽不會顯示，它只是作為一個樣式標記。

一個內聯樣式的實際應用例子如下：

Cue-8 00:00:52.000 --> 00:00:54.000 align:start size:15% <v Emo>I don’t think so. <c.question>You?</c></v> Cue-9 00:00:55.167 --> 00:00:57.042 align:end line:10% <v Proog>I’m Ok.</v> 

這個例子給 Cue 文本添加兩種不同的聲音標簽： Emo 和 Proog 。另外，一個 question 的 CSS 類被指定，可以按慣常方法在 CSS 鏈接文件 或 HTML 頁面里為其指定樣式。

注意要給 Cue 文本添加 CSS 樣式，你需要用一個特定的偽選擇元素，例子如下:

video::cue(v[voice="Emo"]) { color:lime } 

給 Cue 文本添加時間戳也是可能的，表示在不同的時間，不同的內聯樣式出現，例子如下：

Cue-8
00:00:52.000 --> 00:00:54.000
<c>I don’t think so.</c> <00:00:53.500><c>You?</c> 

雖然所有文本依舊在同一時間同時顯示，不過在支持的瀏覽器中，你可以用 :past 和 :future 偽類為其顯示不同樣式。例如：

video::cue(c:past) { color:yellow } 

如你所見，WebVTT 文件給你提供很多設置選項，讓你能夠控制文本（主要是視頻字幕）的顯示方式。但如何讓你的文本出現在媒體文件里面呢？其他還能做什么？ 接下來我們將學習這部分內容。

注意：如果需要檢查你的 WebVTT 是否書寫正確，可查看 WebVTT 校驗器

使用 <track> 元素

HTML5 的 <track> 元素可以把外部軌道文件鏈接到特定資源上。<track> 元素的屬性如下：

名稱	值	說明
kind	subtitles	字幕
	captions	標題，不僅僅是標題，還包括音效及其他音頻信息。
	descriptions	描述，視頻的文本描述。
	chapters	章節導航
	metadata	元數據
src	URL	指定資源URL
srclang	Language code	在 src 資源的語言
label	Free text	給元素添加標簽
default	n/a	如果存在，且用戶無其他特別設定，這個元素默認啟用

<track> 元素是 <audio> 或 <video> 的子元素，可定義多個 <track> 元素：每個提供不同語言的字幕或不同的文本軌道。一個包含英文德文字幕和英文章節的視頻例子如下：

<video controls> <source src="elephants-dream.mp4" type="video/mp4"> <source src="elephants-dream.webm" type="video/webm"> <track label="English subtitles" kind="subtitles" srclang="en" src="elephants-dream-subtitles-en.vtt" default> <track label="Deutsche Untertitel" kind="subtitles" srclang="de" src="elephants-dream-subtitles-de.vtt"> <track label="English chapters" kind="chapters" srclang="en" src="elephants-dream-chapters-en.vtt"> </video> 

瀏覽器支持

遺憾的是，當前瀏覽器對 WebVTT 和 <track> 元素的支持不足，只在 Internet Explorer 10 和 Chrome 16+ 中可用。

你可以在 chrome 中啟動對 track 元素的解析， （通過 chrome:flags 和 “enable <track> element”啟用），使其對 WebVTT 字幕進行渲染。但在多個 track 元素（kind="subtitles"）存在的情況下，無法選擇不同的語言。而盡管 default 屬性不是必須的，含有 default 屬性的字幕會被選擇。

Internet Explorer 10 支持 WebVTT 和 <track> 元素, 但只是在 beta 階段且只在 Windows 8上支持。

目前為止，一種跨瀏覽器的解決方案是使用JavaScript Polyfill。

Polyfills

現在有很多 <track> Polyfills 可用，但大多數並不支持 WebVTT —它們支持之前的，早於 WebVTT 出現的 WebSRT 格式。以下是一些_支持 _WebVTT 的 Polyfills列表 :

• Playr ，作者 Julien Villetorte — 支持字幕，標題，及章節
• Captionator ，作者 Christopher Giffard — 支持字幕
• MediaElementJS ，作者 John Dyer — 支持字幕

以上所有都支持 HTML5 <video>, 但不支持 HTML5 <audio>，但它們都很容易改進以適應兩者。

就個人而言，我比較喜歡用 Playr ，因為它不僅僅支持字幕，而且還是最容易使用的 Polyfills 之一。讓我們看一個實現的例子：

WebVTT/<track> Polyfill 例子

Julien “delphiki” Villetorte 的 Playr 非常好用，准備好你的WebVTT 文件和視頻。

使用 Playr

配置和運行 Playr 步驟：

1. 從 Github下載 Playr

1. 把 javascript 和 CSS 文件包含在你的網頁中，如下：

2. 在你的<video>元素中加入類名 playr_video

就可以了！ Playr 將負責播放視頻及解析包含的 <track> 元素。如前所述， Playr 包含字幕，章節和標題（如字幕一般處理）。我的 代碼例子 給視頻添加了英文和德文的字幕， 以及英文的章節。

我的<video> 元素例子如下：

<video preload="metadata" controls class="playr_video"> <source src="elephants-dream.mp4" type="video/mp4"> <source src="elephants-dream.webm" type="video/webm"> <track label="English subtitles" kind="subtitles" srclang="en" src="elephants-dream-subtitles-en.vtt" default> <track label="Deutsch subtitles" kind="subtitles" srclang="de" src="elephants-dream-subtitles-de.vtt"> <track label="English chapters" kind="chapters" srclang="en" src="elephants-dream-chapters-en.vtt"> </video> 

顯示字幕：

除了添加字幕及章節外，我還寫了一個小的 JavaScript 文件， transcript.js, 定義了一個 loadTranscriptFile 函數。它將 WebVTT 字幕（或標題）文件作為參數，解析它們 （用 Playr 里的代碼），將字幕嵌入在一個 id 為 transcript 的元素中，顯示在屏幕上。

如果 WebVTT 的字幕文本包含 “voice” 標簽, 輸入的名稱也會在文本旁邊顯示。

總結

WebVTT 和 HTML5 <track> 元素使得網絡作者更容易推廣其視頻／音頻內容，讓那些對內容原本呈現方式無法理解的受眾，也能同樣獲取內容。

盡管瀏覽器的支持還是新興的，但一些 Javascript 可以讓我們的媒體文件更容易訪問，而瀏覽器對 WebVTT 的支持也會增加。

可訪問性是網絡作者在為用戶提供媒體內容時所需要考慮的。更多用戶更多歡樂，不是嗎？