使用全局按钮关闭多个视频的隐藏式字幕
Turn closed captions off for multiple videos with global button
我有一个页面包含多个 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] 仅提供第一个轨道的值)。我能做些什么来解决这个问题,还是我走错了路?
你只需要迭代 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');
});
});
我有一个页面包含多个 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] 仅提供第一个轨道的值)。我能做些什么来解决这个问题,还是我走错了路?
你只需要迭代 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');
});
});