YouTube iframe播放器API - OnStateChange未触发

Question

我确实只是复制并粘贴了来自YouTube开发者页面的iframe嵌入式YouTube播放器API参考代码(来自"使用入门"标题下方).唯一的区别是,当状态改变时我添加了一个警报,因为我认为我在onPlayerStateChange函数中做错了.

你可以在http://jsfiddle.net/jesMv/看到j​​sFiddle .

如上所述,它只是YouTube开发人员页面中添加的代码的精确副本

alert('State Changed')

作为在onPlayerStateChange函数中触发的第一件事.

然而,没有任何事情发生......无论我如何看待这个以及我改变了什么,我都无法让onStateChange做任何事情.

我该如何解决这个问题？

Answer 1

iFrame Player API(已于2013年6月修复)存在暂时性问题,您可以在此处阅读:https://code.google.com/p/gdata-issues/issues/detail？id = 4706

Jeff Posnick在这里发布了一个临时解决方法:http: //jsfiddle.net/jeffposnick/yhWsG/3/

作为临时修复,您只需在onReady事件中添加事件侦听器:

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

确保从YT.PLAYER构造函数中删除onStateChange事件(请参阅jsfiddle).

此外,正如Google Code Issue Thread中提到的那样,您设置一个间隔并轮询播放器的当前状态,而不是监听onStateChange事件.以下是执行此操作的示例代码段:

setInterval( function() {
  var state = player.getPlayerState();
  if ( playerState !== state ) {
    onPlayerStateChange( {
      data: state
    });
  }
}, 10);

Firefox和IE问题

其他人提到如果将Firefox播放器放在带有css属性的容器中,Firefox将不会实例化它display: none.Internet Explorer也无法使用visibility: hidden.如果您发现这是问题,请尝试将容器放在页面上,例如left: -150%.

史蒂夫迈斯纳在这里谈到这一点:YouTube API似乎没有在Firefox中加载,IFrame被加载,但是onPlayerReady事件永远不会被激活？

另一个相关的SO问题:YouTube iframe API - onReady和onStateChanged事件未在IE9中触发

编辑:我已经编辑了这个答案,因为人们在2013年修复原始错误后仍然看到此错误.