如何为HTML5 Video载入WebVTT字幕

今天无心看到了一篇关于在H5 video插入字幕的文章，简单作个总结。

前言

网页中使用H5 video播放视频文件，通常而言不外乎是：

1. 字幕嵌在影片里
2. 字幕档另外挂上

第 1 种方法很单纯，字幕就是影片的一部份，因此只要能把影片播起来，字幕也会出现，只是这样的方式，若是影片输出后发现有一段字幕打错了，那影片就要从新再输出，又或者想要放上多语系的字幕，N 种语言就要输出 N 部影片，实在至关并且耗费储存空间（有些影片格式能够嵌入多个字幕轨，再由6186.html">播放器选择使用哪一个字幕）。而第 2 种方法也很常见，同一部影片就能够配上不一样的字幕档案来播放，就算字幕错了也只须要修改字幕档的内容就能够了。

而在 web 技术上，使用 HTML5 的 <video /> 来播放影片，也可使用另外挂上字幕文件的方式来显示字幕，这个功能在目前桌上的主流浏览器都已经支持（参考 Can I Use），主要是支持 WebVTT 及 TTML 两种字幕档格式，而WebVTT，它格式简单、能够用简单的 HTML tag 做格式、与流行的 SubRip (.srt) 档案相似、多数浏览器实做还有多个影音平台（包括 YouTube）支持。

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 /> 标签之中：

<video src="sample.mp4" controls>
  <track kind="subtitles" src="sub_enUS.vtt" srclang="en-us" label="English (US)" default>
  <track kind="subtitles" src="sub_zhTW.vtt" srclang="zh-tw" label="正体中文">
</video>

因此很清楚地看到，只要使用 <track /> 标签就能够加上字幕文件，而可使用 srclang 以及 label 属性来设定字幕的语系，以及字幕在播放器中显示的名称。

你们最常使用的 YouTube，也能够在上传影片后，加上字幕文件的功能上传一样的 webvtt 档案来加入字幕喔！

影片上传后，按下下方的 CC 功能加入字幕

直接加入 vtt 档案便可

字幕的样式控制

CSS中有专门的伪元素::cue能够控制字幕的样式。

能够控制的CSS属性包括：

color
opacity
visibility
text-decoration及相关属性
text-shadow
background及相关属性
outline及相关属性
font及相关属性，包括line-height
white-space
text-combine-upright
ruby-position

例如：

::cue {
    background: none;
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    font-size: medium;
}

【前端交流Q群：659522518】