Jak wykryć zakończenie odtwarzania filmu z YouTube?

93

Pracuję nad witryną, która ma mnóstwo osadzonych filmów z YouTube, klient chce wyświetlać wyskakujące okienko, gdy wideo przestaje się odtwarzać.

Spojrzałem na interfejs API YouTube i wydaje się, że istnieje sposób na wykrycie zakończenia filmu:

http://code.google.com/apis/youtube/js_api_reference.html

ale nie mogę osadzić filmów, o których wspomnieli na tej stronie, ponieważ wszystkie filmy są już w witrynie (tysiące, które zostały dodane ręcznie przez wklejenie kodu osadzania).

Czy istnieje sposób na wykrycie zakończenia tych filmów bez zmiany któregokolwiek z istniejących filmów (przy użyciu JavaScript)?

TK123
źródło
2
Jedyne, co mógłbym zasugerować, to programowa zmiana wpisów osadzania w celu uwzględnienia enablejsapi=1. Jeśli znajdują się w bazie danych, zmiana srcatrybutu powinna być dość łatwa . Możesz potrzebować wyrażenia regularnego, jeśli są one statycznie wstawiane do plików HTML.
pobierz

Odpowiedzi:

175

Można to zrobić za pomocą interfejsu API odtwarzacza YouTube:

http://jsfiddle.net/7Gznb/

Przykład pracy:

    <div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>
TK123
źródło
1
Jak udało Ci się to zintegrować z wieloma filmami na jednej stronie?
motoxer4533
@ motoxer4533 nie miałem do czynienia z wieloma filmami na tej samej stronie, ale tylko z jednym na stronę. Nie jestem pewien, czy interfejs API umożliwia tworzenie wielu graczy i wykrywanie ich poszczególnych punktów końcowych.
TK123
1
nie powinno być trudne do skonfigurowania dla wielu graczy - po prostu skonfiguruj wiele var player1, var player2, var player 3 itd., a następnie uruchom kod konfiguracji wiele razy - z każdym nowym var
codeguy
Również pełny przykład robienia czegoś podobnego przy użyciu interfejsu iframe api tutaj developers.google.com/youtube/…
JeremyWeir
3
Dla czytelności radziłbym YT.PlayerState.ENDED podczas sprawdzania stanu.
Bart Burg
-7

Może zechcesz umieścić na wszystkich stronach skrypt, który wykonuje następujące czynności ... 1. znajdź element iframe youtube: wyszukując go według szerokości i wysokości według tytułu lub znajdując www.youtube.com w jego źródle. Możesz to zrobić ... - przechodząc przez pętlę window.frames przez pętlę for-in, a następnie filtrując według właściwości

  1. wstrzyknij jscript do elementu iframe bieżącej strony, dodając funkcję onYoutubePlayerReady, która musi zawierać http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

  2. Dodaj detektory zdarzeń itp.

Mam nadzieję że to pomoże

yshouman
źródło
1
nie jestem pewien, czy jest to możliwe ze względu na zasady międzydomenowe
Asher Garland