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