by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7421 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

HTML5 Video视频支持支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。使用很简单，用一个元素即可，例如：

只要src属性地址OK，同时有default属性，字幕就会生效。

您可以狠狠地点击这里：HTML5 video视频track加载WebVtt字幕demo

Chrome浏览器下就会显示类似下图的字幕：

其中，加载的.vtt文件内容如下：

就是个文本文件，且格式很简单，一开始声明下WebVTT，然后下面就是视频时间范围，下一行就是字幕内容，时间可以精确到毫秒，但通常0.5秒足矣。

实际上WebVTT规范可以有更多规则，具体可以参见官网文档。

.vtt文件的MIME type是text/vtt。在Chrome和Firefox浏览器下，.vtt字幕是可以无障碍加载显示的，但是对于IE10+浏览器，虽然也支持.vtt字幕，但是，却需要定义MIME type，否则会无视WebVTT格式。比较简单方式就是在字幕所在文件夹下面添加个.htaccess文件，里面写上AddType text/vtt .vtt。

通常我们保存在电脑中的外挂字幕都不是vtt而是，常见的如srt格式，需要需要用在web中，可以使用工具转一下就好了，自己Node.js写一个，或者使用这个在线小工具：Simple SubRip to WebVTT converter

对于元素完整的写法应该是：

这里出现了几个属性，分别是kind, label, srclang以及default。

根据MDN文档上的解释，其含义分别如下：

文字版说明如下：

「隐藏字幕（Closed Captioning，简称CC)是电视节目或影碟中为有特殊情况或者需要的观众而准备的宇幕，例如观众在听力上有障碍，或者需要无音条件下观赏节目。此时字幕中可使用一些解释性的语言来描述节目内容。J

上面的解释出自这篇我觉得解释非常好的文章：你所不知道的 CC：隐藏式字幕 备份文字版

根据我的测试，从效果上而言，subtitles和captions几乎看不到任何区别，有区别的应该是在语义上，或者字幕性质上。subtitles主要就是对人说话进行翻译或确认；而captions不仅需要人对话的内容提示，紧张的背景音乐，或者汽车吱吱作响的刹车声都需要在字幕中描述出来。这样，即使用户静音也能知道视频里到底在玩些什么。我想，如果是经常看国外影视作品的小伙伴肯定会有类似的字幕体验，有的就对话字幕，有的事无巨细，就是subtitles和captions的区别。

如果我们对元素设置controls属性，则就看看到CC标示按钮，如下图：

点击之，我们不仅可以切换字幕（同时多个），还可以关闭字幕。

还有一点，我还以为srclang和HTML页面的lang设置有关联，会自动选中对应语言的字幕之类，测试发现我想多了。

一个视频标签中可以有多个元素，不同元素的kind等属性值也都可以不一样。

例如，demo中的双字幕HTML代码：

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

可以控制的CSS属性包括：

例如：

则字幕直接就是白字黑边效果：

除此之外，WebVTT还支持一些HTML标签进行样式控制，常见的有声音标签，颜色，加粗标签，倾斜标签，下划线标签，还有和标签等。