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