2016-06-05 16 views
0

ich dieses Skript haben, wie hier beschrieben: YouTube Player API:Youtube API arbeiten gewohnt

<!DOCTYPE html> 
<html> 
    <!-- ... --> 
    <body> 
    <h1>Youtube Video</h1> 

    <div id="player"></div> 

    <script type="text/javascript"> 
     // Load the IFrame Player API code asyncronously 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/iframe_api"; 

     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // Creating an iframe and youtube player 
     var player; 
     function onYoutubeIframeAPIReady(){ 
     console.log("Youtube API Loaded"); 

     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'LSwbPyIP-gY', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // When video_player is ready, call this function 
     function onPlayerReady(event){ 
     event.target.playVideo(); 
     } 

     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> 

Nach Neuladen der Seite, nichts Happing. Also, am Ende des Skripts, nenne ich diese Funktion:

onYoutubeIframeAPIReady(); 

dies tun, gibt mir eine Fehlermeldung:

(index):25 Uncaught ReferenceError: YT is not defined

Aber wenn ich die generierten Quellcode überprüfen, sehe ich diese zwei Linien vor meinem Skript-Tag:

<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWkc-3E/www-widgetapi.js" async=""></script> 
<script src="https://www.youtube.com/iframe_api"></script> 

Wenn der API-Code IFrame-Player geladen werden, warum ich den Fehler „YT nicht definiert ist“ bin immer? Was vermisse ich?

diesen Test ausführen zu können, ich bin mit Google Chrome 51.0.2704.79 (64-Bit)

Antwort

0

Sie müssen selbst onYoutubeIframeAPIReady nicht nennen.

Youtube Server Seitencode rufen Sie es für Sie.

Check in ihrem Code, den Sie diesen Code finden:

var Sb = l("onYTReady"); 
    Sb && Sb(); 
    var Tb = l("onYouTubeIframeAPIReady"); 
    Tb && Tb(); 
    var Ub = l("onYouTubePlayerAPIReady"); 
    Ub && Ub(); 

Sie laden Sie einfach das Skript und es Ihre Funktion aufrufen.

+0

also, wenn ich nicht selbst anrufen muss, was soll ich tun, damit es funktioniert? Ich frage das, weil, wenn ich 'onYoutubeIframeAPIReady()' Funktion nicht nenne, passiert nichts. – psantos

+2

Kopieren Sie den Code genau aus youtube Beispiel. Arbeitet – Ygalbel

+0

nach dem Ausführen von 'git diff', habe ich das eigentliche Problem :). Ich schrieb 'function onYoutubeIframeAPIReady()' anstelle von 'function onYouTubeIframeAPIReady()'. – psantos