使用全局按钮关闭多个视频的隐藏式字幕

Question

我的页面包含多个带有不同标题的 HTML5 视频 (webvtt)。视频控件被隐藏。我有一个 ID 为 #check 的按钮«添加字幕»。如果用户选中此按钮，所有视频都应显示字幕，如果未选中，字幕应隐藏。到目前为止我所拥有的：

默认隐藏字幕：

var video = document.querySelector('.video');
var tracks = video.textTracks;
var track = tracks[0];

$(document).ready(function() {
  track.mode = 'hidden';
});

如果按钮被选中/取消选中，显示/隐藏标题：

$(function() {
  $('#check').click(function() {
    if($(this).is(':checked')) {
      track.mode = 'showing';
    }  else {
      track.mode = 'hidden';
    }
  });
});

这非常有效，但仅适用于第一个视频（因为轨道 [0] 仅提供第一个轨道的值）。有什么办法可以解决这个问题，还是我走错了路？

Answer 1

你只需要迭代tracks，像这样：

$(function() {
  $('#check').click(function() {
    var isChecked = $(this).is(':checked');
    for (var index = 0; index < tracks.length; index++) {
        tracks[index].mode = (isChecked ? 'showing' : 'hidden');
    }
  });
});

编辑

只有第一个受到影响的原因是您选择了第一个视频。将您的第一个代码更改为：

var video = document.querySelectorAll('.video'); //querySelector selects the first match only
var videoTrackSets = [];
for (var videoIndex = 0; videoIndex < video.length; videoIndex++) {
    videoTrackSets.push(video[videoIndex].textTracks);
}

$(document).ready(function() {
    for (var setIndex = 0; setIndex < videoTrackSets; setIndex++)
        for (var trackIndex = 0; trackIndex < videoTrackSets[setIndex].length; trackIndex++)
            videoTrackSets[setIndex][trackIndex].mode = 'hidden';
});

并将第二个代码更改为

$(function() {
  $('#check').click(function() {
    var isChecked = $(this).is(':checked');
    for (var setIndex = 0; setIndex < videoTrackSets.length; setIndex++)
        for (var trackIndex = 0; trackIndex < videoTrackSets[setIndex].length; trackIndex++)
            videoTrackSets[setIndex][trackIndex].mode = (isChecked ? 'showing' : 'hidden');
  });
});