YouTube播放器API樣品

Question

我試圖從代碼完美的作品時，我有沒有別的我的網頁上developers.google.com/*

<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: 'yZxrao3zou4', 
       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> 

給出的樣本下面的代碼，但是當我嘗試將其與我的項目合併它似乎並不奏效。

我猜問題是下面幾行：

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

有人能告訴我這是什麼上面兩行，尤其是[0]的一部分？

我的代碼幾乎是相同的，除了代替腳本標記我有一個函數內的代碼，它接受videoId的參數。

編輯： 我的代碼如下：

<script> 
    // I have a input area, where the user can enter the movie name. When the user submits the movie name, I capture the val and pass it to the youtube(). 
    function youtube(movie_name) { 
     var videoId; 
     $.ajax({ 
      url:"https://www.googleapis.com/youtube/v3/search?part=snippet&q="+movie_name+"&type=video&key=my_key", 
      success: function (response) { 
       videoId = response.items[0].id.videoId; 
       findMovieById(videoId); 
      } 
     }); 

    } 

    function findMovieById(videoID) { 

     $("#player").css('display', 'inline-block'); 
     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: ""+videoID, 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
      alert('Player Ready'); 
      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> 

Answer 1

示例代碼背後的想法是，當你後，裝載的YouTube iFrame的庫代碼頁面的其餘部分則顯得更加一致了裝;因此示例代碼演示瞭如何在頁面底部放置一個內聯，並在其中遍歷DOM，找到可以插入另一個標籤的位置，並且動態地執行此操作（[0]只是說'第一個輸入文檔中名稱的所有元素的數組）。

這裏的邏輯是，當iFrame庫加載時，它會調用函數onYouTubeIframeAPIReady。但是，由於庫異步加載，最好以這種方式加載它，以確保API掛鉤可能依賴的任何其他內容（例如，您綁定的DOM中的元素）已經存在。

另請注意，由於加載的庫將始終調用onYouTubeIframeAPIReady函數，因此它必須在任何其他函數之外定義。否則它不可調用。這可能是爲什麼將它嵌入代碼中的某個地方不起作用。

隨意發佈一些您的合併代碼以獲得更詳細的幫助。