Come rilevare quando termina la riproduzione di un video di YouTube?

Sto lavorando su un sito che ha un sacco di video di YouTube incorporati, il cliente vuole mostrare un popup ogni volta che un video smette di essere visualizzato.

Ho guardato l'API di YouTube e sembra che ci sia un modo per rilevare quando un video finisce:

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

ma non posso incorporare i video come menzionati in quella pagina poiché i video sono già tutti sul sito (migliaia che sono stati aggiunti manualmente incollando il codice di incorporamento).

C'è un modo per rilevare la fine di questi video senza modificare nessuno dei video esistenti (utilizzando javascript)?

— TK123
fonte

L'unica cosa che potrei suggerire è modificare a livello di codice le voci di incorporamento da includere enablejsapi=1. Se sono in un database dovrebbe essere abbastanza facile cambiare l' srcattributo. Potresti aver bisogno di alcune espressioni regolari se sono inserite staticamente nei file HTML.

— scarica il

Risposte:

175

Questo può essere fatto tramite l'API del player di YouTube:

http://jsfiddle.net/7Gznb/

Esempio di lavoro:

    <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
fonte

Come hai integrato questo con più video su una pagina?

— motoxer4533

@ motoxer4533 beh, non ho dovuto gestire più video sulla stessa pagina ma solo uno per pagina. Non sono sicuro che l'API consenta la creazione di più giocatori e il rilevamento dei loro endpoint individuali.

— TK123

non dovrebbe essere difficile da configurare per più giocatori - basta configurare più var player1, var player2, var player 3 ecc. Quindi eseguire il codice di configurazione più volte - con ogni nuova var

— codeguy

Anche un esempio completo di come fare qualcosa di simile utilizzando l'API iframe qui developers.google.com/youtube/…

— JeremyWeir

Per la leggibilità, consiglierei YT.PlayerState.ENDED durante il controllo dello stato.

— Bart Burg,

-6

Quello che potresti voler fare è includere uno script in tutte le pagine che faccia quanto segue ... 1. trova l'iframe di YouTube: cercandolo per larghezza e altezza per titolo o trovando www.youtube.com nella sua fonte. Puoi farlo ... - scorrendo il window.frames con un ciclo for-in e poi filtrando in base alle proprietà

inserisci jscript nell'iframe della pagina corrente aggiungendo la funzione must-include di onYoutubePlayerReady http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
Aggiungi i listener di eventi, ecc.

Spero che questo ti aiuti

— yshouman
fonte

Non sono sicuro che ciò sia possibile a causa delle regole interdominio

— Asher Garland