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


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


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

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

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

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

而在 web 技術上,使用 HTML5 的 <video /> 來播放影片,也可以使用另外掛上字幕檔的方式來顯示字幕,這個功能在目前桌上的主流瀏覽器都已經支援(參考 Can I Use),主要是支援 WebVTTTTML 兩種字幕檔格式,我個人比較喜歡 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 檔案即可

參考資料

Comments (0)

Skip to main content