如何为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】