Question

根据我的阅读，我应该如何设置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（）不起作用。

如何解决此问题？

Answer 1

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

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

Answer 2

这个功能：

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

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

只有你必须遵守的规则是：不要把这个函数放在domready事件中 - 它必须尽快定义。

例如在mootools中我使用它：

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

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

Answer 3

我有了答案，将脚本的这一部分分开并将其放在头部的自己的脚本标签中。 OMG，最后

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

Answer 4

我认为这是使用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

Answer 5

<!DOCTYPE html>

为了让我在FF4中运行html5的东西，

必须引导页面

Answer 6

如果你正在嵌入像这样的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>

在＆lt; / iframe＆gt;之后

。至少这就是我如何让它发挥作用。

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

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

Answer 7

刚出现同样的问题，但出于其他原因。它适用于Chrome但不适用于Firefox，原因是我有一个http标题“Content-type：text / xml”而不是“Content-type：text / html”。现在用作HTML也可以在Firefox中激活onYouTubePlayerReady事件。

只需发布此信息，万一有人会绊倒Google的答案（就像我在尝试寻找解决方案时所做的那样）。

YouTube API - 不会触发'onYouTubePlayerReady（）'

7 个答案: