Youtube JSAPI, Beispiele funktionieren nicht

Question

Ich versuche, das YT-Objekt zu erfassen. Die onYouTubePlayerReady() - Funktionen werden aufgerufen, aber ich kann scheinbar nichts mit dem Objekt tun.

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("swfobject", "2.2"); 
</script> 
<script type="text/javascript"> 
    function onYouTubePlayerReady (playerID) 
    { 
     ytplayer = document.getElementById(playerID); 
    } 

    function play() 
    { 
     if (ytplayer) 
     { 
      ytplayer.playVideo(); 
     } 
    } 
    play(); 
</script> 

YTPlayer ist mit dem DOM verwiesen und nicht das Video selbst (spielen dafür wirft Uncaught Typeerror:. Objekt # keine Methode ‚playvideo‘ hat, aber das ist im Grunde die von Google angegebenen Beispiel

Was mache ich falsch?

Answer 1

Ich sehe nicht, wo Sie Ihren Video-Player überhaupt in Ihrem oben genannten Code initialisieren.Der Code unten funktioniert gut in Firefox Ersetzen Sie die Video-ID des Videos, das Sie möchten spiele anstelle von [YOUR_VIDEO_ID] und du solltest alles haben Der folgende Code funktioniert wie ein Champion in IE und Chrome.

<div id="video" class="overlay"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
    <div id="ytapiplayer"></div> 
    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: 'myytplayer' }; 
    swfobject.embedSWF("http://www.youtube.com/v/[YOUR_VIDEO_ID]?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "640", "360", "8", null, null, params, atts); 

    function onYouTubePlayerReady(playerId) { 
     ytplayer = document.getElementById("myytplayer"); 

     ytplayer.addEventListener('onStateChange','onytplayerStateChange'); 
    } 

    function onytplayerStateChange(newState) { 
     alert("Player's new state: "+newState); 
    } 

    function play() { 
     if (ytplayer) { 
     ytplayer.playVideo(); 
     } 
    } 
    </script> 
    <a href="javascript:void(0)" onclick="play()">Play</a> 
</div> 

denke ich, was Sie fehlt, ist, dass Sie die „playerId“ verweisen müssen von was auch immer Sie auf die Initialisierung Attribute Objekt übergeben in (var atts = ...) Linie. Ein wenig Testen zeigt, dass die "onYouTubePlayerReady" -Funktion keinen gültigen ID-Wert übergibt, mit dem die DOM-Suche durchgeführt werden kann.

Answer 2

Sie rufen play(); an, sobald die Seite geladen wird.

Aber es dauert einige Zeit, um youtube player zu laden und somit wird die Funktion onYouTubePlayerReady nach einiger Zeit aufgerufen.

Da Sie ytplayer in onYouTubePlayerReady definieren, können Sie ytplayer nicht verwenden, bevor onYouTubePlayerReady aufgerufen wird. Außerdem sollte ytplayer global gemacht werden, damit beide Funktionen es benutzen können.