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

Posted 2023-03-07

【中文标题】使用全局按钮关闭多个视频的隐藏式字幕

【英文标题】：Turn closed captions off for multiple videos with global button

【发布时间】：2018-06-03 20:28:04

【问题描述】：

我的页面包含多个带有不同标题的 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] 仅提供第一个轨道的值）。有什么办法可以解决这个问题，还是我走错了路？

【问题讨论】：

您应该使用 querySelectorAll 并循环播放所有视频。另外，如果您已经在使用 jQuery，为什么还要使用 querySelector？

谢谢！不幸的是，querySelectorAll 返回 TypeError “tracks is undefined”。

【参考方案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');
  );
);

【讨论】：

谢谢！它似乎仍然只适用于第一个视频。一个 console.log(tracks[index]);只返回第一个视频的轨道。

@L.Maher 我已经编辑了我的答案，如果现在更有帮助，请告诉我。

非常感谢。它似乎仍然不起作用。每当我选中该框时，控制台都会返回一个 TypeError“videoTrackSets[setIndex] 未定义”。我觉得问题已经出在第一个代码中的 videoTrackSets 上。当我做一个 console.log(videoTrackSets);它返回一个包含 9 个项目的数组（我有 9 个视频），但每个项目的值是未定义的。如果我做一个 console.log(video.textTrack);它返回“未定义”。这可能不应该是未定义的？很抱歉这些问题，我是 JS 新手，其中很多对我来说仍然是个谜。

@L.Maher 确实，在第一个代码中我错误地使用了 video.textTracks，但视频是一个数组，我应该使用 video[videoIndex]。我已经编辑了我的答案并解决了这个问题。请让我知道这是否解决了问题。我没有你的结构，所以我没有办法测试。为错误道歉:)

这很好用，非常感谢您的帮助！非常感谢！