YouTube API — 不触发“onYouTubePlayerReady()”答案

【问题标题】：YouTube API — not firing 'onYouTubePlayerReady()'YouTube API — 不触发“onYouTubePlayerReady()”
【发布时间】：2011-01-06 04:32:41
【问题描述】：

根据我的阅读，这就是我应该如何设置YouTube API：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta content='text/html;charset=UTF-8' http-equiv='content-type' />
    <title>Youtube Player</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
      function onYouTubePlayerReady(id) {
        console.log("onYouTubePlayerReady() Fired!");
        var player = $("#youtube_player").get(0);
      }

      var params = { allowScriptAccess: "always" };
      var atts = { id: "youtube_player" };
      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
                         "youtube", "425", "356", "8", null, null, params, atts);

    </script>
  </head>
  <body>
    <div id="youtube"></div>
  </body>
</html>

但是，'onYouTubePlayerReady()' 根本不会触发，如果我手动获取对播放器的引用，很多方法是未定义的；例如，cueVideoById() 有效，但 playVideo() 无效。

我该如何解决这个问题？

【问题讨论】：

这可能不是它，但您可以尝试为文档提供 HTML 4 文档类型而不是 HTML 5 吗？只是为了排除这种可能性。
如文档中所述，您是否使用此 Web 服务器？ code.google.com/apis/youtube/js_api_reference.html
@Pekka：不，我不是，只是在 API 文档页面上注意到了这一点。我想我以后需要多读一些东西。谢谢:)
不客气！我添加了我的评论作为答案，所以如果它对你有用，你可以关闭它。
我在这里尝试了所有解决方案，但没有任何效果...没有在 dom 之前加载脚本，没有在服务器上运行，不包括 youtube api，没有在 head 的 script 标签中加载脚本...

标签： javascript swfobject youtube-api

【解决方案1】：

如documentation 中所述，您需要使用测试脚本在网络服务器上：

注意：要测试任何这些调用，您必须让文件在网络服务器上运行，因为 Flash 播放器会限制本地文件和互联网之间的调用。

【讨论】：

【解决方案2】：

<!DOCTYPE html>

必须引导页面才能让 html5 的内容在 FF4 中为我发挥作用

【讨论】：

【解决方案3】：

我有答案，把这部分脚本分开，放在自己的脚本标签的头部。天哪，终于

<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
    ytp = document.getElementById('ytplayer');
    ytp.mute();
};
</script>

【讨论】：

【解决方案4】：

刚刚遇到同样的问题，但出于另一个原因。它适用于 Chrome，但不适用于 Firefox，原因是我有一个 http 标头“Content-type: text/xml”而不是“Content-type: text/html”。现在，作为 HTML 服务也会在 Firefox 中触发 onYouTubePlayerReady 事件。

发布此内容以防有人偶然发现 Google 提供的此答案（就像我在尝试寻找解决方案时所做的那样）。

【讨论】：

【解决方案5】：

我认为这是使用 javascript 将 youtube 视频添加到您的网站的最佳方式。它为您提供了一种非常清晰的事件处理方式。它适用于本地机器，据我所知，它适用于苹果设备。您可以使用 youtube api 的 javascript 文档中描述的所有事件和函数。

<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
    evt.target.playVideo();
}
function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}
</script>

来源：http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

【讨论】：

【解决方案6】：

这个函数：

function onYouTubePlayerReady(playerid) {
  console.log('readyIn');
};

不必直接在单独的脚本标签中。

您必须遵守的唯一规则是：不要将此函数放在 domready 事件中 - 它必须尽快定义。

例如在 mootools 中我是这样使用它的：

function onYouTubePlayerReady(playerid) {
  echo('readyIn');
};

document.addEvent('domready', function() { 
   ...
});

【讨论】：

这个答案对我来说是最好的

【解决方案7】：

如果您像这样嵌入 youtube 视频：

<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

那么你应该放置

<script src="http://www.youtube.com/player_api"></script>

在之后。至少我是这样让它工作的。

此外，如果您通过 jQuery 或其他方式动态更改 iframe 的 [src] 属性以加载新视频，那么您需要在加载后调用 onYouTubePlayerAPIReady()。

我更喜欢更改 [src] 属性，然后： setTimeout(onYouTubePlayerAPIReady, 500);

【讨论】：