我有一个页面包含多个带有不同标题的 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] 仅提供第一个轨道的值)。我能做些什么来解决这个问题,还是我走错了路?