网页 video 中如何加载字幕

互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。本号发出的内容，都是自己实测过的，有问题请留言。

先看下效果(PC chrome)

video 中加 track 标签

只支持 vtt 格式
<video autoplay controls>
  <source src="xxx.mp4" type="video/mp4">
  <track src="xxx.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>
</video>

track 的兼容性

在已生成的 video 中加 track

如果不能在 video 生成时插入 track 标题，就用 JS 插入 track。比如用了人家的播放器，又没有添加字幕 API

let track = document.createElement("track");
track.src = "xxx.vtt";
track.srclang = "zh";
track.setAttribute("label", "中文字幕");
track.setAttribute("kind", "captions");
track.setAttribute("default", "");
videoEle.appendChild(track);

如果 vtt 文件在 CDN 上

1
2
3

videoEle.setAttribute("crossdomain", "true");

并且 vtt 请求要支持 CORS

如果 CDN 并不能支持 CORS

搞个代理接口拿到 vtt 文件内容，如:

srt 格式:
00:00:03,334 --> 00:00:06,971
From his new album, "Yo Hago Lo Que Me Da La Gana,"

vtt 格式:
00:00:03.334 --> 00:00:06.971
From his new album, "Yo Hago Lo Que Me Da La Gana,"

转换成如下格式(中间态，可以忽略):
trackList = [
  {
    begin : 3.334,
    end : 6.971,
    text : 'From his new album, "Yo Hago Lo Que Me Da La Gana,"',
  },
];
let track = video.addTextTrack("captions", "English", "en");
track.mode = "showing";  // showing/hidden/disabled 因为可以添加多个字幕，一般默认显示一个就可以了
trackList.forEach(item => {
  track.addCue(new VTTCue(item.begin, item.end, item.text));
});

播放器切换视频时，清空字幕

1
2
3

video 有 addTextTrack 方法，但并没有对应的 removeTextTrack ！
未解决，目前只能重置 video，显然不是好办法。
如果您有更好的办法，请留言，谢谢！