使用 jQuery 和 YouTube API 加载事件答案

【问题标题】：Event loads with jQuery and YouTube API使用 jQuery 和 YouTube API 加载事件
【发布时间】：2012-04-26 19:38:36
【问题描述】：

当我将 YouTube 视频加载时的回调 onYouTubePlayerReady 放在 jQuery 就绪函数中时，加载视频时不会调用它。但是，当我将回调放在 jQuery 就绪函数之外时，它会被调用。如何修复它以便我可以将回调放在 jQuery 函数中。代码如下。

<html>
<body>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}swfobject.js"></script>    

<script type="text/javascript">

  /// --> When I put onYouTubePlayerReady here it IS called  //
  function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      ytplayer.playVideo();
  }

  $(document).ready(function(){
      
       /// --> When I put onYouTubePlayerReady here it is NOT called //

       var params = { allowScriptAccess: "always" };
       var atts = { id: "myytplayer" };
       swfobject.embedSWF("http://www.youtube.com/v/UkhisRY3RRQ?version=3&enablejsapi=1","ytapiplayer", "800", "500", "8", null, null, params, atts);
});

</script>

   <div id="ytapiplayer">
       You need Flash player 8+ and JavaScript enabled to view this video.
   </div>
</body>
</html>

另外，这里是 swfobject 的 url，http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js，以防万一。

【问题讨论】：

标签： javascript jquery youtube-api jquery-events

【解决方案1】：

你必须让它全局可用——如果你把它放在你准备好的处理程序中，它的作用域就是那个处理程序。为什么你需要它？您需要访问范围？你可以试试这个，但我不确定它是否适合你——这取决于 youtubeplayer 引用指针关联的建立时间：

<html>
<body>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}swfobject.js"></script>    

<script type="text/javascript">

  $(document).ready(function(){

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

       var params = { allowScriptAccess: "always" };
       var atts = { id: "myytplayer" };
       swfobject.embedSWF("http://www.youtube.com/v/UkhisRY3RRQ?version=3&enablejsapi=1","ytapiplayer", "800", "500", "8", null, null, params, atts);
});

</script>

   <div id="ytapiplayer">
       You need Flash player 8+ and JavaScript enabled to view this video.
   </div>
</body>
</html>

【讨论】：

成功了！我希望onYouTubePlayerReady 准备就绪，这样我就可以从里面做 jQuery 的东西了。我很好奇它为什么起作用。 “这取决于何时建立 youtubeplayer 引用指针关联”是什么意思
之所以有效，是因为我们将函数分配给了一个全局变量“onYouTubePlayerReady”——YT API 挂钩的全局变量。（在你有一个私有函数之前，你准备好的处理程序之外的任何东西都不能作为目标）。 - 我担心 YT API 可能会在我们分配它之前将指针设置为全局“onYouTubPlayerReady”变量，这可能会出现问题。很高兴它成功了。
要么使用window.onYouTubePlayerReady = ...，要么在$().ready 处理程序之外添加var onYouTubePlayerReader;。否则，您正在为未声明的全局变量赋值。这个功能太糟糕了，在严格模式下被禁止（见这里：jsfiddle.net/WNtmV）。