如何爲HTML5 Video載入WebVTT字幕

今天無心看到了一篇關於在H5 video插入字幕的文章，簡單作個總結。

前言

網頁中使用H5 video播放視頻文件，通常而言不外乎是：

1. 字幕嵌在影片裏
2. 字幕檔另外掛上

第 1 種方法很單純，字幕就是影片的一部份，因此只要能把影片播起來，字幕也會出現，只是這樣的方式，若是影片輸出後發現有一段字幕打錯了，那影片就要從新再輸出，又或者想要放上多語系的字幕，N 種語言就要輸出 N 部影片，實在至關並且耗費儲存空間（有些影片格式能夠嵌入多個字幕軌，再由6186.html">播放器選擇使用哪一個字幕）。而第 2 種方法也很常見，同一部影片就能夠配上不一樣的字幕檔案來播放，就算字幕錯了也只須要修改字幕檔的內容就能夠了。

而在 web 技術上，使用 HTML5 的 <video /> 來播放影片，也可使用另外掛上字幕文件的方式來顯示字幕，這個功能在目前桌上的主流瀏覽器都已經支持（參考 Can I Use），主要是支持 WebVTT 及 TTML 兩種字幕檔格式，而WebVTT，它格式簡單、能夠用簡單的 HTML tag 做格式、與流行的 SubRip (.srt) 檔案相似、多數瀏覽器實做還有多個影音平臺（包括 YouTube）支持。

WebVTT 字幕檔格式

WebVTT 文件（文字編碼使用 UTF-8，文件名爲 *.vtt 檔，MIME type 爲 text/vtt）的格式很簡單，它大概會像是這樣：
WEBVTT
1
00:00:07.240 --> 00:00:11.130
你們好 最近 Visual Studio 2013 作了一些更新

2
00:00:11.140 --> 00:00:18.110
那咱們今天請到 twMVC 的 Dino
來爲咱們介紹這個更新裏面關於 SASS Editor 的部分

3
00:00:18.120 --> 00:00:19.280
那咱們如今交給 Dino

....

這個檔案的第一行以 WEBVTT 開頭，而後接下來都是用空行來區隔每一段字幕，每一段字幕，在字幕的術語裏是稱做「Cue」由三個部份組成：

1.Cue identifier

也就是上面例子的 1, 2, 3, ....，做爲參考用的部份。它能夠是任何單行文字，像是「1 - 開始」這個部份無關緊要。

2.Cue timing

字幕出現的時間，時間格式能夠是 hh:mm:ss.ttt 或是 mm:ss.ttt，而時間的起始就是以「 --> 」來表示，注意這個箭頭的先後都要有空白。

3.Subtitles: 字幕文字

這部份就是字幕的文字內容了，它能夠是多行文字，不過只要一有空行就會被視爲這部份字幕結束。而字幕可使用一些簡單的 HTML tag 來作格式，詳細說明請看參考文件。

字幕檔的使用

有了 WebVTT 檔以後，若是要爲影片加上字幕，就照着這樣的方式加在 <video /> 標籤之中：

<video src="sample.mp4" controls>
  <track kind="subtitles" src="sub_enUS.vtt" srclang="en-us" label="English (US)" default>
  <track kind="subtitles" src="sub_zhTW.vtt" srclang="zh-tw" label="正體中文">
</video>

因此很清楚地看到，只要使用 <track /> 標籤就能夠加上字幕文件，而可使用 srclang 以及 label 屬性來設定字幕的語系，以及字幕在播放器中顯示的名稱。

你們最常使用的 YouTube，也能夠在上傳影片後，加上字幕文件的功能上傳一樣的 webvtt 檔案來加入字幕喔！

影片上傳後，按下下方的 CC 功能加入字幕

直接加入 vtt 檔案便可

字幕的樣式控制

CSS中有專門的僞元素::cue能夠控制字幕的樣式。

能夠控制的CSS屬性包括：

color
opacity
visibility
text-decoration及相關屬性
text-shadow
background及相關屬性
outline及相關屬性
font及相關屬性，包括line-height
white-space
text-combine-upright
ruby-position

例如：

::cue {
    background: none;
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    font-size: medium;
}

【前端交流Q羣：659522518】