代码之家 › 专栏 › 技术社区 › Ashley Williams

YouTube API_

youtube-api swfobject javascript

Ashley Williams · 技术社区 · 15 年前

根据我读到的,这就是我应该如何设置 YouTube 应用程序编程接口:

<!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()不能。

我如何解决这个问题?

7 回复 | 直到 10 年前

Pekka 15 年前

您需要使用测试脚本在Web服务器上,如中所述 documentation 以下内容:

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

Shawn Chin 12 年前

这个函数:

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

不必在单独的脚本标记中直接位于头部。

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

例如,在moootools中,我这样使用它:

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

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

animuson 13 年前

我得到了答案,将脚本的这一部分分离出来,并将其放在自己的脚本标记中。最后,OMG

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

Tosh CCLab 12 年前

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

Uberbug 13 年前

<!DOCTYPE html>

为了让HTML5能在FF4中为我工作,我必须在页面的前面。

Eric Corriel 11 年前

如果你要嵌入类似这样的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);

Philipp Lenssen 13 年前

只是有同样的问题,但出于另一个原因。它在Chrome中工作,但不在Firefox中工作,原因是我有一个HTTP头“content-type:text/xml”而不是“content-type:text/html”。作为HTML的服务现在也会在Firefox中触发OnyOutubeplayerReady事件。

把这个贴出来,以防有人在google上发现这个答案(就像我在寻找解决方案时做的那样)。