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

Question

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

默认隐藏字幕：

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

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

如果按钮是 checked/unchecked，show/hide 字幕：

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

这非常有效，但仅适用于第一个视频（因为 tracks[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');
  });
});

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

Turn closed captions off for multiple videos with global button

jquery

captions

closed-captions

webvtt

vtt