2013-11-01 16 views
5

Stavo riscontrando problemi nell'isolare un bug nel mio codice JavaScript per il controllo dei video di YouTube tramite l'API iframe/HTML5.Il comportamento dell'API iFrame di YouTube è incoerente/non deterministico

sono tornato al codice demo sulla pagina documentazione principale:

https://developers.google.com/youtube/iframe_api_reference

... e con mia sorpresa, vedo lo stesso comportamento incoerente anche quando io uso il codice demo da lì e non cambiare nulla.

Il comportamento è che alcune volte, quando carico questa pagina, il lettore si avvia automaticamente (che è l'intento del codice) e altre volte no. Succede sempre nel caricamento. Inoltre, il giocatore non sembra mai fermarsi dopo 6 secondi, contrariamente a quanto dicono i commenti.

I punti di interruzione verificano che almeno una parte del problema è che il numero onPlayerReady() non viene sempre chiamato. Quando imposto un punto di interruzione in onPlayerReady(), di solito non viene raggiunto e viene raggiunto solo il momento in cui il giocatore va avanti per riuscire a riprodurre automaticamente.

Ovviamente, questo comportamento può dipendere dalla velocità e dall'affidabilità della mia connessione Internet, che è cablata e altrimenti sembra decentemente veloce. L'ho appena testato - 24 Mbps, e sembra abbastanza coerente.

Se apporto modifiche superficiali all'html, a volte sembra che la pagina venga caricata su autoplay, ma non sempre. A volte ricarico ogni pochi secondi per 5 volte di fila senza hit autoplay o onPlayerReady, quindi esegui una sesta volta e in quel momento verrà eseguito automaticamente.

Sto utilizzando Chrome v30.0.1599.101 su Mac OS 10.8.4.

So che il codice è in beta e in flusso, e non dovrebbe essere ancora il livello di produzione, ma speravo che ci fosse qualcosa che potessi provare.

Ecco il codice che sto utilizzando, FYI, nel caso in cui il codice pubblicato sulla pagina di riferimento api sopra cambi. Ancora una volta, non sto alterando un singolo personaggio.

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

    <script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    </script> 
    </body> 
</html> 

risposta

1

stavo aprendo la pagina di livello locale, che rende per un comportamento diverso in ogni sorta di piccoli modi da come funziona al momento della consegna da un server. Il client browser stesso gestisce cose come la cache in modo diverso quando il contenuto è locale. Quando ho messo la stessa pagina su un server, ha iniziato a funzionare ogni volta.

Inoltre, FYI, per il mio problema più grande che mi ha portato giù questa rabbithole, ho scoperto che avevo bisogno di seguire questo consiglio: https://stackoverflow.com/a/14952334/2308190 ... al fine di ottenere le mie funzioni di callback di YouTube per essere chiamato con jQuery caricato.

+0

Ottenere ora un comportamento incoerente, servito tramite dropbox: http: //dl.dropboxusercontent.it/u/1035381/abbreviatore/youtubetest.html. Solitamente gioca dall'inizio a 6 secondi (il comportamento non è corretto), a volte salta avanti e suona per più di 6 secondi senza fermarsi (anche il comportamento non corretto). Questo è su Win 7, Chrome 30.0.1599.101 m ("aggiornato" a partire da questa data) –

+0

E sul mio progetto attuale, che è più complesso del codice demo fornito da YouTube, sto diventando incoerente nel fatto che Il codice API js chiama mai il pulsante onYouTubeIframeAPIReady. A volte proprio sul caricamento della pagina, a volte mai, senza modifiche al codice. Questo è su Win 7, Chrome 30.0.1599.101 m ("aggiornato" a partire da questa data) –

1

Avevo una situazione in cui il mio primo iframe di YouTube veniva caricato correttamente e quelli successivi no.

Il problema è stato causato dalla creazione di un nuovo YT.Player prima che il suo <div> fosse stato aggiunto al DOM. Questo problema non si è verificato la prima volta che ho creato uno YT.Player, perché l'API di YouTube doveva essere caricata prima. Ciò ha causato un ritardo di microsecondi che ha consentito l'esecuzione del resto del mio codice, pertanto lo è stato aggiunto al DOM prima del caricamento completo dell'API di YouTube.

Problemi correlati