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

У меня есть страница, содержащая несколько видео 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] предоставляют значение только первой дорожки). Могу ли я что-нибудь сделать, чтобы решить эту проблему, или я ошибаюсь?


jquery closed-captions webvtt captions vtt
person L. Maher    schedule 03.06.2018    source источник
comment
Вы должны использовать querySelectorAll и просмотреть все видео в цикле. Кроме того, если вы уже используете jQuery, зачем вообще использовать querySelector?   -  person powerbuoy    schedule 04.06.2018
comment
Спасибо! querySelectorAll возвращает, к сожалению, следы TypeError не определены.   -  person L. Maher    schedule 04.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам просто нужно повторить 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');
  });
});
person Lajos Arpad    schedule 03.06.2018
comment
Спасибо! Похоже, это работает только для первого видео. Console.log (треки [индекс]); возвращает только дорожку первого видео. - person L. Maher; 04.06.2018
comment
@ L.Maher Я отредактировал свой ответ, пожалуйста, дайте мне знать, если он сейчас более полезен. - person Lajos Arpad; 04.06.2018
comment
Большое спасибо. Похоже, это все еще не работает. Каждый раз, когда я устанавливаю этот флажок, консоль возвращает TypeError videoTrackSets [setIndex] is undefined. Я чувствую, что проблема уже заключается в videoTrackSets в первом коде. Когда я делаю console.log (videoTrackSets); он возвращает массив из 9 элементов (у меня 9 видео), но значение каждого элемента не определено. Если я сделаю console.log (video.textTrack); он возвращает undefined. Это, вероятно, не должно быть неопределенным? Извините за эти вопросы, я новичок в JS, и многие из них до сих пор остаются для меня загадкой. - person L. Maher; 04.06.2018
comment
@ L.Maher действительно, в первом коде я неправильно использовал video.textTracks, но видео - это массив, и мне следовало использовать video [videoIndex]. Я отредактировал свой ответ и исправлю это. Пожалуйста, дайте мне знать, устранило ли это проблему. У меня нет вашей структуры, поэтому у меня нет средств для тестирования. Извиняюсь за ошибки :) - person Lajos Arpad; 05.06.2018
comment
Это отлично работает, большое спасибо за вашу помощь! Очень признателен! - person L. Maher; 05.06.2018