html5 video 外挂字幕[webVTT]研究

目录

1. WebVTT是什么

   • WebVTT内容
   • 设置字幕样式
   • 为字幕设置位置
   • 章节chapters解释
2. webVTT 详解
3. webVTT实现
4. 浏览器行为
5. 浏览器支持情况

WebVTT是什么

html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道】，是一个以.vtt结尾的纯文本文件，里面会包含以下几种视频信息：

1. 字幕subtitles

关于对话的转译或者翻译

1. 标题captions

类似于标题，但是还包括音响效果和其他音频信息。

1. 说明description

预期为一个单独的文本文件，通过屏幕阅读器描述视频

1. 章节chapters

旨在帮助用户浏览整个视频

1. 元数据metadata

默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。

webVTT 详解

1. 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

2. 设置字幕样式

   通过内联样式为字幕设置样式

   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>!"
   

3. 为字幕设置位置

   位置设置可以写在时间设置的同一行

   - 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.
       

4. 章节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>

浏览器行为

1. 所有text track都存在与媒体元素[media element]的textTrackList属性中
2. 播放过程中遇到一个cue就会触发cuechange和enter事件
3. 当一个字幕会触发一个exit事件。

浏览器支持情况

参考

1. The track element
2. Web Video Text Tracks can i use?
3. mdn track
4. Subtitles and Chaptering using Timed Text Tracks
5. W3C WebVTT standard: http://dev.w3.org/html5/webvtt/#webvtt-cue-timings
6. Timed track use cases: http://wiki.whatwg.org/wiki/Timed_tracks
7. Timed track formats: http://wiki.whatwg.org/wiki/Timed_track_formats