为 HTML5 个视频添加字幕

Question

我使用 JavaScript 构建了自定义 HTML5 视频播放器，我使用以下 js 代码隐藏本机控件：

var video = document.getElementById("video");
video.controls = false;

然后我自定义了控件（播放 - 暂停 - 全屏...）一切正常。 我的问题是当我实现如下所示的标签时：

<track label="English" kind="subtitles" src="sub/vid_sub.vtt" srclang="en">

字幕没有显示出来，所以我发现隐藏控件的js代码也隐藏了标签，我试图找到一种方法来禁用除标签之外的所有原生控件，但我不能. 如果有什么办法可以解决这个问题，请告诉我。

Answer 1

如果您将默认添加到 html 轨道，它将默认显示 如果您想操作多个字幕，您可以查询选择它们然后显示一个用户点击如下。

for (var i = 0; i < video.textTracks.length; i++) {
    if (video.textTracks[i].language == 'en') {
        video.textTracks[i].mode = 'showing';
 }

如果你想隐藏它就按如下方式

track.mode="hidden";