16

根据我的阅读，这就是我应该如何设置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() 无效。

我该如何解决这个问题？

4

7 回答 7

29

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

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

于 2010-01-17T23:54:00.463 回答
5

这个功能：

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

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

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

例如在 mootools 我这样使用它：

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

document.addEvent('domready', function() { 
   ...
});
于 2012-10-22T08:07:24.250 回答
4

我有答案，将这部分脚本分离出来，放在自己的脚本标签中。天啊，终于

<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
    ytp = document.getElementById('ytplayer');
    ytp.mute();
};
</script>
于 2011-10-23T08:12:01.960 回答
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

于 2012-04-20T09:12:47.067 回答
1

如果您要像这样嵌入 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>

在 </iframe> 之后。至少我是这样让它工作的。

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

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

于 2013-07-03T15:26:11.143 回答
1 
<!DOCTYPE html>

必须引导页面才能让 html5 的东西在 FF4 中为我工作

于 2011-05-17T20:22:55.187 回答
0

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

只是发布这个以防有人偶然发现谷歌的这个答案（就像我在试图找到解决方案时所做的那样）。

于 2011-12-20T14:12:17.780 回答