video播放视频时配置字幕的实现方法

项目里有很多视频资料，现在客户需要给给这些视频资料添加字幕解说。

网上查了不少资料，终于简单实现了这个效果。

/* 直接给字幕标签加样式是无效的，必须以下面的方法给样式。*/
/* 由于google chrome和firefox的字幕默认样式是黑色背景，效果难看，因此需要样式调整 */
video::cue{
    background-color:transparent;
    color:green;
    font-size:20px;
    line-height: 100px;
}

<video class="videobox" id="vdoPlay" src="/videos/abc.mov" controls="controls" name="media" autoplay>
    <track src="/Content/videotext/test_en.vtt" srclang="en"    label="English" kind="subtitles" default />
    <track src="/Content/videotext/test_cn.vtt" srclang="zh-cn" label="简体中文" kind="subtitles" />
</video>

这里有几个注意事项

1. 虽然字幕文件可以有多种格式，但最好是vtt格式的，因为这个格式所有浏览器都支持

2. iis里mimi type需要添加.vtt文件的支持，否则页面取不到字幕文件，文件类型为text/vtt

3. vtt格式的文件，一定要是utf-8编码的，否则不识别或乱码

4. vtt文件要干净严格，不能有多余的空格或隐藏符号

5. 有些旧版的浏览器可能不支持，建议用高版本的chrome测试

6. 字幕文件必须跟网页文件同域，也就是在一个网站目录下

具体格式如下：

第一行必须是WEBVTT, 申明文件格式

然后空行，

接着是时间区间

然后是文字内容，文字内容可以换行