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');
  });
});

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

1 个答案: