YouTube API и веб-узлы Убедитесь, что два видео синхронизированы (видео 1 приостанавливается при буферах Video 2)

Фон

Я пытаюсь интегрировать видео в приложение презентации слайд-шоу. Я отключил элементы управления со стороны учеников и включил кнопку воспроизведения/паузы в API YouTube, чтобы при нажатии на нее событие запускалось через толкатель, а видео запускалось на экране преподавателей и на экране учащихся.

Трудности

Проблема возникает, когда у одного из пользователей происходит медленное подключение к Интернету. Если у преподавателя есть более быстрый интернет, чем у ученика, тогда видео будет не синхронизировано.

Мой подход

У меня есть функция, которая использует API YouTube для управления воспроизведением и приостановкой видео.

/**
 *
 */
togglePlay: function(){
    var videoId = this.videoId;
    if (this.isPlaying) {
        this.players[videoId].pauseVideo(); // Pauses the video
        this.isPlaying = false;
    } else {
        this.players[videoId].playVideo(); // Starts the video
        this.isPlaying = true;
    }
},

Внутри видеообъекта я добавил прослушиватель событий onStateChange, который запускается, когда видео воспроизводится/приостанавливается/буферизируется. Событие отправляется на эту функцию.

/**
 *
 */
emittStateChange: function(e){
    switch(e.data) {
        // if the teachers video is...
        case 1: // playing
            pusher.channel4.trigger('client-youtube-triggered', {
                videoId: youtube.videoId,
                status: 1, // start the students video
            });
        break;
        case 2: // paused
            pusher.channel4.trigger('client-youtube-triggered', {
                videoId: youtube.videoId,
                status: 2, // pause the students video
            });
        break;
        case 3: // buffering
            pusher.channel4.trigger('client-youtube-triggered', {
                videoId: youtube.videoId,
                status: 2, // pause the students video
            });
    }
},

Итак, когда учителя нажимают на воспроизведение, начинается воспроизведение и тиражирует событие воспроизведения, которое отправляется на вышеуказанную функцию. Эта функция отправляет событие-толкатель в браузер студентов со статусом 1, что означает воспроизведение видео. Это событие принимается этой функцией:

/**
 * 
 */
receiveStateChange: function(data){
    this.videoId = data.videoId;
    switch(data.status) {
        // if the teachers video is...
        case 1: // playing
            this.isPlaying = false;
            this.togglePlay();
        break;
        case 2: // paused
            this.isPlaying = true;
            this.togglePlay();
        break;
        case 2: // buffering
            this.isPlaying = true;
            this.togglePlay();
    }
},

Мое понимание

  • Учитель нажимает кнопку воспроизведения
  • togglePlay() называется
  • this.isPlaying = false, поэтому playVideo() называется
  • видео начинает играть для учителя
  • Затем api YouTube запускает событие onStateChange
  • это отправляется в функцию emittStateChange() со статусом 1 (Игра)
  • Этот статус отправляется через толкатель ученикам receiveStateChange() Функция
  • для case = 1 this.isPlaying() установлено значение false
  • переключается воспроизведение, чтобы запустить видео студентов.
  • Студенты видео начинают буферизацию, которая запускает youtube api  onStateChange снова
  • Статус 3 (буферизация) затем отправляется обратно учителю через толкатель
  • Это приостанавливает видео учителей для ожидания ученика

Проблема:

  • Когда видео учителей останавливается, событие onStateChange запускается еще снова , прежде чем видеозапись студентов будет сделана буферизацией и отправлена ​​студенту.
  • Это останавливает видео студентов, и теперь оба видео приостановлены.

Что я хочу:

Когда видео студентов является буферизацией, я просто хочу временно приостановить видео учителей UNTIL, которые учащиеся играют, а затем играть в оба. Я просто не понимаю, как я должен разорвать этот цикл, который заканчивается тем, что оба видео приостанавливаются.

Ответ 1

Я уверен, что вы можете отправлять более одного события за раз.
Таким образом, вы можете отправить информацию учителю о том, какой студент является "буферизацией" и любой другой соответствующей информацией.
Затем со стороны учителей настройте условное утверждение, которое будет оценивать сообщение. Так что в функции, учитель игрок не будет отправлять контрольную инструкцию для учащегося, если это условие существует.

Как и у обочины на стороне учителей, если они сочтут это необходимым, они могут остановить/приостановить видео в любое время для всех игроков.