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

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

0 голосов
/ 03 июня 2018

У меня есть страница, содержащая несколько видео 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';
    }
  });
});

Это работает отличноНО только для первого видео (так как дорожки [0] доставляют только значение первой дорожки).Могу ли я что-нибудь сделать, чтобы решить эту проблему, или я нахожусь на совершенно неверном пути?

1 Ответ

0 голосов
/ 04 июня 2018

Вам просто нужно выполнить итерацию 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');
  });
});
...