使用全局按钮关闭多个视频的隐藏字幕
使用全局按钮关闭多个视频的隐藏字幕
提问于 2018-06-04 04:28:05
我有一个页面包含多个不同字幕的HTML5视频(webvtt)。视频控件处于隐藏状态。我有一个ID为#check的按钮«add subtitle»。如果用户选中此按钮，则所有视频都应显示字幕，如果未选中，则应隐藏字幕。到目前为止，我所拥有的：
默认情况下隐藏标题：
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';
}
});
});这非常有效，但只适用于第一个视频(因为曲目只提供第一个曲目的值)。我能做些什么来解决这个问题，或者我走在一条完全错误的道路上？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 05:03:25
您只需迭代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');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670676
复制相关文章
相似问题