Próbuję zintegrować wideo do pokazu slajdów prezentacji aplikacji. Wyłączyłem sterowanie po stronie studentów i ustawiłem przycisk odtwarzania/pauzy w interfejsie API YouTube, tak aby po kliknięciu wydarzenie zostało wywołane przez popychacz, a wideo zaczyna się na ekranie nauczyciela i na ekranie Uczniów.
Trudności
Problem pojawia się, gdy jeden z użytkowników ma wolne połączenie internetowe. Jeśli nauczyciel ma szybszy internet niż uczeń, filmy nie będą zsynchronizowane.
moje podejście
Mam funkcję, która korzysta z API YouTube, aby kontrolować odtwarzanie i pauzę wideo.
/**
*
*/
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;
}
},
Wewnątrz obiektu wideo Dodałem detektor onStateChange zdarzenia, który jest wyzwalany podczas odtwarzania filmu/wstrzymane/buforowanie. Zdarzenie zostanie wysłane do tej funkcji.
/**
*
*/
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
});
}
},
Więc kiedy naciśnie nauczycieli grać rozpoczęciem filmu i truggers zdarzenie zabaw, który zostanie wysłany do powyższej funkcji. Ta funkcja wysyła zdarzenie popychacza do przeglądarki uczniów ze statusem 1, co oznacza odtworzenie wideo.To zdarzenie jest odbierane przez funkcję:
/**
*
*/
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();
}
},
Moje zrozumienie
- prasy nauczycielka grać przycisk
togglePlay()nazywathis.isPlaying = falsetakplayVideo()nazywa- wideo zaczyna grać na nauczyciel
- API YouTube następnie wyzwala
onStateChangewydarzenie - ten jest przesyłany do funkcji
emittStateChange()ze statusem 1 (gra) - Stan ten jest wysyłany za pośrednictwem popychacza do studentów
receiveStateChange()funkcję - dla sprawy = 1
this.isPlaying()jest ustawiona na false - kolanowej grze nazywa się rozpocząć studentów wideo
- Studenci wideo rozpoczyna buforowanie która wyzwala onStateChange zdarzenie youtube api ponownie
- Stan 3 (buforowanie) jest następnie wysyłane z powrotem do nauczyciela poprzez popychacz
- To wstrzymuje wideo nauczycielom czekać na studenta
Problem:
- Gdy materiał wideo nauczyciele przerywa zdarzenie onStateChange, a następnie ponownie , zanim wideo uczniów zostanie zrobione, buforowanie i wysłane do ucznia.
- To zatrzyma wideo uczniów, a teraz oba filmy są wstrzymane.
Czego chcę:
Gdy materiał wideo jest buforowanie uczniowie po prostu chcę, aby tymczasowo wstrzymać nauczycieli wideo DO studenci bawi się wtedy grać zarówno. Po prostu nie rozumiem, jak powinienem przerwać ten cykl, który kończy się na wstrzymaniu obu filmów.
Wydaje mi się, że musisz rozróżnić buforowanie i wstrzymywanie wideo.Obecnie śledzisz tylko, czy film jest odtwarzany lub wstrzymany, ale próba odtworzenia i konieczność buforowania różni się od wstrzymania. W ten sposób, gdy nauczyciel otrzymuje * buforowanie * od ucznia, może być transmitowany do wszystkich, dopóki nikt już nie będzie buforował. Pamiętaj, że wymaga to również śledzenia liczby studentów, którzy wciąż buforują swoje wideo. Kod po stronie nauczyciela musi to uwzględniać. –