天天看點

html5 video 外挂字幕[webVTT]研究html5 video 外挂字幕[webVTT]研究

webvtt是什麼

webvtt内容

設定字幕樣式

為字幕設定位置

章節chapters解釋

webvtt 詳解

webvtt實作

浏覽器行為

浏覽器支援情況

html5 video 外挂字幕英文簡稱webvtt【video text track 網絡視訊文本軌道】,是一個以.vtt結尾的純文字檔案,裡面會包含以下幾種視訊資訊:

字幕subtitles

關于對話的轉譯或者翻譯

标題captions

類似于标題,但是還包括音響效果和其他音頻資訊。

說明description

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

章節chapters

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

中繼資料metadata

預設不打算展示給觀衆的、和視訊有關的資訊和内容。但是你可以使用javascript來通路。

這裡有一個标準的示例:

webvtt檔案中的每一項為一個cue,每一個cue以箭頭分割的開始時間和結束時間,cue對應的文本在下一行,每一個cue可以有一個id, cue的時間格式為 hours:minutes:seconds:milliseconds,必須嚴格遵守,時分秒必須為兩位數字,不足的以0填補,毫秒必須是三位數字,這個裡有個.vtt檔案的格式校驗器live webvtt validator

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

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

具體示例

文法跟字幕類似,如下

使用的時候是需要設定kind = 'chapter',目前主流浏覽器關于chapter的支援不太完善,最好的辦法采用我們自己定義的界面,一般自定義的界面需要提供一些特性:

展示章節清單

允許使用者選擇章節

播放時高亮目前選擇的章節

采用如下的代碼可以達到的我們的目的

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

所有text track都存在與媒體元素[media element]的texttracklist屬性中

播放過程中遇到一個cue就會觸發cuechange和enter事件

當一個字幕會觸發一個exit事件。

html5 video 外挂字幕[webVTT]研究html5 video 外挂字幕[webVTT]研究

the track element

web video text tracks can i use?

mdn track

subtitles and chaptering using timed text tracks

w3c webvtt standard: http://dev.w3.org/html5/webvtt/#webvtt-cue-timings

timed track use cases: http://wiki.whatwg.org/wiki/timed_tracks

timed track formats: http://wiki.whatwg.org/wiki/timed_track_formats

繼續閱讀