使用 WebVTT 作為 HTML5 影片播放時的字幕格式

  • Article

最近在工作上常運用 Channel 9 以及 YouTube 作為線上影音平台，來播放製作的一些教學或是新知通報的影片。而這兩個平台都支援用 HTML5 的方式來播放影片，也就是直接使用 <video /> 標籤來嵌入影片。


播放教學影片時掛上字幕的效果

由於處理的是一些教學影片，影片內容會提及許多專有名詞，或是很關鍵的概念，所以我都會再製作字幕，而處理字幕的這個部份，如果是在電腦裡播放影片的情況，一般而言不外乎是：

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

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

而在 web 技術上，使用 HTML5 的 <video /> 來播放影片，也可以使用另外掛上字幕檔的方式來顯示字幕，這個功能在目前桌上的主流瀏覽器都已經支援（參考 Can I Use），主要是支援 WebVTT 及 TTML 兩種字幕檔格式，我個人比較喜歡 WebVTT，主要是它格式簡單、可以用簡單的 HTML tag 作格式、與流行的 SubRip (.srt) 檔案類似、多數流覽器實作還有多個影音平台（包括 YouTube）支援，所以我現在製作影片的字幕，都是使用 WebVTT 的字幕檔案格式來完成。

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 /> 標籤之中：

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

大家最常使用的 YouTube，也可以在上傳影片後，加上字幕檔的功能上傳同樣的 webvtt 檔案來加入字幕喔！


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


直接加入 vtt 檔案即可

參考資料