html5video外掛字幕[webVTT]研究

slalx_1986發表於2016-02-02

HTMLIDEWeb

html5 video 外掛字幕[webVTT]研究

WebVTT是什麼

html5 video 外掛字幕英文簡稱webVTT【video text track 網路視訊文字軌道】，是一個以.vtt結尾的純文字檔案，裡面會包含以下幾種視訊資訊：

字幕subtitles

關於對話的轉譯或者翻譯

標題captions

類似於標題，但是還包括音響效果和其他音訊資訊。

說明description

預期為一個單獨的文字檔案，通過螢幕閱讀器描述視訊

章節chapters

旨在幫助使用者瀏覽整個視訊

後設資料metadata

預設不打算展示給觀眾的、和視訊有關的資訊和內容。但是你可以使用Javascript來訪問。

webVTT 詳解

WebVTT內容

這裡有一個標準的示例：
```
WEBVTT

1
00:00:13.000 --> 00:00:16.100
I heard about this arduino project, and I saw it online - 

2
00:00:16.100 --> 00:00:20.100
- and I said `Wow! a lot of people are starting to talk about this.
I should check it out!`
```
webvtt檔案中的每一項為一個cue，每一個cue以箭頭分割的開始時間和結束時間，cue對應的文字在下一行，每一個cue可以有一個id, cue的時間格式為 hours:minutes:seconds:milliseconds，必須嚴格遵守，時分秒必須為兩位數字，不足的以0填補，毫秒必須是三位數字，這個裡有個.vtt檔案的格式校驗器Live WebVTT Validator

設定字幕樣式

通過內聯樣式為字幕設定樣式

WEBVTT

1
00:00:13.000 --> 00:00:016.100
Ich hörte von dieser <c.red.caps>arduino</c> Projekt, und ich sah es online -

2
00:00:16.100 --> 00:00:20.100
- und ich sagte "<b>Wow!</b> eine Menge Leute fangen an, darüber zu reden.
Ich <i>check it out</i>!"

為字幕設定位置

位置設定可以寫在時間設定的同一行

- D:vertical / D:vertical-lr
>   垂直的顯示文字而不是水平的。 它也指定文字是增長到左邊（ vertical）還是右側（ vertical-lr ）
-  L:X / L:X%
>  一個數字或百分比。 如果是一個百分點，那麼它指從框架頂部開始的位置。如果是一個數字，它表示會是在多少行。
-  T:X%
>  視訊上的水平文字位置。T:100% 表示文字會放在視訊的右側。
-  A:start / A:middle / A:end
> 文字在盒子內的對齊方式。start是左對齊， middle是居中對齊， end是右對齊。
- S:X%
>  文字盒子的寬度，表示為視訊寬度的百分比。

具體示例

WEBVTT

00:00:05.000 --> 00:00:08.040 A:middle L:10%
I dabble? Listen to me. What a jerk.

00:00:05.000 --> 00:00:08.040 A:middle L:60%
Yeah, I sort of dabble around,
you know.

章節chapters解釋

語法跟字幕類似，如下

chapter-1
00:00:00.000 --> 00:00:18.000
Introductory Titles

chapter-2
00:00:18.001 --> 00:01:10.000
The Jack Plugs

chapter-3
00:01:10.001 --> 00:02:30.000
Robotic Birds

使用的時候是需要設定kind = `chapter`,目前主流瀏覽器關於chapter的支援不太完善，最好的辦法採用我們自己定義的介面，一般自定義的介面需要提供一些特性：

展示章節列表
允許使用者選擇章節
播放時高亮當前選擇的章節

採用如下的程式碼可以達到的我們的目的

<video src="sintel.mp4">
  <track kind="chapter" 
         label="Chapters" 
         src="sintel_chapters.vtt" srclang="en"
         onload = "displayChapters(this)"></track>
</video>

function displayChapters(trackElt){
    if((trackElt) && (textTrack = trackElt.track)){
        if(textTrack.kind === "chapters"){
            // Do not show the track
            textTrack.mode = `hidden`;
            var chapterBlock = document.getElementById("chapters");
            // List cues
            for (var i = 0; i < textTrack.cues.length; ++i) {
                var cue = textTrack.cues[i];
                var chapterName = cue.text;
                var start = cue.startTime;
                // Design an interface here allowing to choose a chapter
                ....
            }
        }
    }
}

webVTT實現

在html5通過video的子元素track來實現

<video controls>
  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">


  <track label="English Captions"     kind="captions"     srclang="en"
                                                          src="video_cc_en.vtt">


  <track label="German Subtitles"     kind="subtitles"    srclang="de"
                                                          src="video_sub_de.vtt">

  <track label="French Subtitles"     kind="subtitles"    srclang="fr"
                                                          src="video_sub_fr.vtt">


  <track label="English Descriptions" kind="descriptions" srclang="en"
                                                          src="video_audesc_en.vtt">


  <track label="Chapters"             kind="chapters"     srclang="en"
                                                          src="video_chapters_en.vtt">
</video>