API iframe player di YouTube – OnStateChange non si triggers

Ho letteralmente copiato e incollato il codice dalla pagina degli sviluppatori di YouTube, riferimento API YouTube Player per iframe Embeds (da sotto l’intestazione “Per iniziare”). L’unica differenza è che ho aggiunto un avviso al fuoco quando lo stato è cambiato, perché pensavo di fare qualcosa di sbagliato all’interno della funzione onPlayerStateChange.

Puoi vedere jsFiddle su http://jsfiddle.net/jesMv/ .

Come affermato, è solo una copia esatta del codice dalla pagina degli sviluppatori di YouTube con l’aggiunta

alert('State Changed') 

come la prima cosa da triggersre nella funzione onPlayerStateChange.

Niente sta accadendo, comunque … Non importa come guardo questo e quello che cambio, semplicemente non riesco a fare in modo che onStateChange faccia qualcosa.

Come posso risolvere questo problema?

C’è stato un problema temporaneo con l’API di iFrame Player (che è stata corretta a giugno 2013) che puoi leggere qui: https://code.google.com/p/gdata-issues/issues/detail?id=4706

Jeff Posnick ha pubblicato una soluzione temporanea qui: http://jsfiddle.net/jeffposnick/yhWsG/3/

Come correzione temporanea, devi solo aggiungere il listener di eventi all’interno dell’evento onReady:

 function onReady() { player.addEventListener('onStateChange', function(e) { console.log('State is:', e.data); }); } 

Assicurati di rimuovere l’evento onStateChange dal costruttore YT.PLAYER (vedi jsfiddle).

Inoltre, come qualcuno menzionato nel thread di emissione del codice Google, imposti un intervallo e esegui il polling del lettore per il suo stato corrente invece di ascoltare l’evento onStateChange. Ecco un esempio di snippet di codice per farlo:

 setInterval( function() { var state = player.getPlayerState(); if ( playerState !== state ) { onPlayerStateChange( { data: state }); } }, 10); 

Problemi di Firefox e IE

Altre persone hanno menzionato che Firefox non istanzia il player di YouTube se è collocato in un contenitore con la display: none proprietà css display: none . Internet Explorer non funzionerà anche con la visibility: hidden . Se stai riscontrando questo problema, prova a posizionare il contenitore fuori dalla pagina con qualcosa come a left: -150% .

Steve Meisner ne parla qui: l’ API di YouTube non sembra caricarsi in Firefox, IFrame viene caricato, ma l’evento onPlayerReady non si triggers mai?

E un’altra domanda SO correlata: YouTube iframe API – eventi onReady e onStateChanged non triggersti ​​in IE9

Modifica: ho modificato questa risposta per essere più approfondita perché le persone vedono ancora questo errore dopo che il bug originale è stato corretto nel 2013.