youtube iframe api loadVideoById() 错误答案

【问题标题】：youtube iframe api loadVideoById() erroryoutube iframe api loadVideoById() 错误
【发布时间】：2012-04-04 15:42:23
【问题描述】：

我正在将 youtube 视频添加到公司网站，并希望它们在非闪存设备上显示。我一直在使用 youtube iframe API 并更新了他们的一个示例，以允许用户单击链接以更改 iframe 中的视频。修改后的代码是：

<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
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();
}

function loadVideo(videoID) {
  if(player) { player.loadVideoById(videoID); }
}

</script>

<a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a>

</body>
</html>

我唯一添加的是：

function loadVideo(videoID) {
  if(player) { player.loadVideoById(videoID); }
}

这在 Safari、Chrome 和 Firefox 中运行良好，但在 IE7、8 或 9 中不起作用。在 IE7 和 8 中它返回错误“对象不支持此属性或方法”。

这是 API 的问题还是我做错了什么？

【问题讨论】：

标签： iframe youtube-api

【解决方案1】：

我遇到了类似的问题，结果表明，只要未调用 onPlayerReady，就不应调用 YT.Player 对象（包括 loadVideoById）上的任何方法。

检查if(player) {...} 是不够的，Player 对象将被创建，并且一些属性已经可用 in out 没有您需要的方法可用。

【讨论】：

解决了。 ... events: { 'onReady': function() { ...}

【解决方案2】：

您需要从 onPlayerReady 事件中调用加载视频函数。

例如，如果您想在单击缩略图时加载视频，请执行以下操作（这需要 jquery，但它应该明白这一点）：

function onPlayerReady(evt) {

  evt.target.playVideo();

  //declare the click even function you want
  $('#thumbs a).click(function(){

    //get a data-video-id attr from the <a data-video-id="XXXXXX">
    var myvideo = $(this).attr('data-video-id');

    //call your custom function
    loadVideo(myvideo);

    //prevent click propagation 
    return false;
  });
}

这样您就可以确定播放器已加载完毕。

【讨论】：

嘿，我也遇到了同样的问题。我确信在调用 loadVideo() 之前已经调用了 onPlayerReady。我没有在 onPlayerReady 函数中调用 loadVideo。我在 onPlayerStateChange 函数中调用它。可能是什么问题？

【解决方案3】：

在我的点击事件处理程序中调用player.loadVideoById 之后使用return false 防止点击传播对我来说是成功的。

【讨论】：