youtube iframe api loadVideoById()错误

时间:2012-03-20 06:33:38

标签: iframe youtube-api

我正在将YouTube视频添加到公司网站,并希望它们显示在非Flash设备上。我一直在使用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的问题还是我做错了什么?

3 个答案:

答案 0 :(得分:5)

我遇到了类似的问题,事实证明只要loadVideoById没有被调用,就不应该调用YT.Player对象上的任何方法(包括onPlayerReady) 。

执行检查if(player) {...}是不够的,将创建Player对象,并且在没有您需要的方法的情况下,某些属性已经可用。

答案 1 :(得分:3)

您需要从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;
  });
}

通过这种方式,您可以确定播放器已加载。

答案 2 :(得分:0)

在我的点击事件处理程序中调用return false后,使用player.loadVideoById阻止点击传播为我做了诀窍。