Отключите субтитры для нескольких видео с помощью глобальной кнопки

Question

У меня есть страница, содержащая несколько видео HTML5 с разными заголовками (webvtt). Элементы управления видео скрыты. У меня есть кнопка "добавить субтитры" с идентификатором #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';
    }
  });
});

Это отлично работает, НО только для первого видео (так как track [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');
  });
});