2010-01-17 4 views
16

Da quello che ho letto, questo è come dovrei impostare il YouTube API:YouTube API - non sparare 'onYouTubePlayerReady()'

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta content='text/html;charset=UTF-8' http-equiv='content-type' /> 
    <title>Youtube Player</title> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script> 
    <script type="text/javascript" charset="utf-8"> 
     function onYouTubePlayerReady(id) { 
     console.log("onYouTubePlayerReady() Fired!"); 
     var player = $("#youtube_player").get(0); 
     } 

     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "youtube_player" }; 
     swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
         "youtube", "425", "356", "8", null, null, params, atts); 

    </script> 
    </head> 
    <body> 
    <div id="youtube"></div> 
    </body> 
</html> 

Tuttavia, 'onYouTubePlayerReady()' non si attiva a tutti e se ottengo manualmente un riferimento al giocatore, molti metodi non sono definiti; ad esempio, cueVideoById() funziona, ma playVideo() no.

Come posso risolvere questo problema?

+0

Questo non è probabilmente ma si può provare a dare il documento un DOCTYPE HTML 4 invece di HTML 5 uno? Giusto per escludere questa possibilità. –

+3

E sei su un server web con questo, come indicato nei documenti? http://code.google.com/apis/youtube/js_api_reference.html –

+0

@Pekka: No, non lo ero, ho appena notato che nella pagina dei documenti API. Penso di aver bisogno di leggere le cose di più in futuro. Grazie :) –

risposta

29

Devi essere su un server web con il tuo script di test, come indicato nel documentation:

Nota: Per provare una di queste chiamate, è necessario che il file in esecuzione su un server web, come il Flash Player limita le chiamate tra i file locali e Internet.

1
<!DOCTYPE html> 

doveva condurre alla pagina in modo che la roba HTML5 di funzionare per me in FF4

4

ho la risposta, separare questa parte dello script e metterlo in testa nella sua proprio tag script OMG, finalmente

<script type="text/javascript" language="javascript"> 
function onYouTubePlayerReady(playerid) { 
    ytp = document.getElementById('ytplayer'); 
    ytp.mute(); 
}; 
</script> 
+0

OMG grazie mille! – Stpn

0

Appena avuto lo stesso problema, ma per un altro motivo. Funzionava in Chrome ma non in Firefox, e il motivo era che avevo un'intestazione http "Content-type: text/xml" invece di "Content-type: text/html". Anche in HTML viene pubblicato l'evento onYouTubePlayerReady in Firefox.

Pubblicare questo nel caso in cui qualcuno si imbatta in questa risposta di Google (come ho appena fatto quando si cerca di trovare una soluzione).

4

Considero questo il modo migliore di aggiungere un video di YouTube al tuo sito Web con javascript. Ti dà un modo molto chiaro di trattare gli eventi. Funziona su una macchina locale e, per quanto ne so, funziona su dispositivi Apple. Puoi utilizzare tutti gli eventi e le funzioni descritte nella documentazione javascript per l'apo di YouTube.

<div id="player"></div> 
<script> 
//Load player api asynchronously. 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var done = false; 
var player; 
function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'JW5meKfy3fY', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 
function onPlayerReady(evt) { 
    evt.target.playVideo(); 
} 
function onPlayerStateChange(evt) { 
    if (evt.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
} 
function stopVideo() { 
    player.stopVideo(); 
} 
</script> 

fonte: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

5

questa funzione:

function onYouTubePlayerReady(playerid) { 
    console.log('readyIn'); 
}; 

non devono essere direttamente in testa nel tag script separato.

Solo la regola da mantenere è: non inserire questa funzione nell'evento domready - deve essere definita prima.

Per esempio in MooTools Io lo uso come questo:

function onYouTubePlayerReady(playerid) { 
    echo('readyIn'); 
}; 

document.addEvent('domready', function() { 
    ... 
}); 
+0

Questa risposta è la migliore per me – Macumbaomuerte

1

Se stai incorporare i video di YouTube in questo modo:

<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 

allora si dovrebbe posizionare

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

dopo il </iframe >. Almeno è così che ho potuto farlo funzionare.

Inoltre, se si modifica dinamicamente l'attributo [src] dell'iframe tramite jQuery o qualsiasi altra cosa per caricare un nuovo video, è necessario chiamare onYouTubePlayerAPIReady() dopo il caricamento.

preferisco modificare l'attributo [fonte] e poi: setTimeout(onYouTubePlayerAPIReady, 500);