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函数，因此它必须在任何其他函数之外定义。否则它不可调用。这可能是为什么将它嵌入代码中的某个地方不起作用。

随意发布一些您的合并代码以获得更详细的帮助。