YouTube iframe播放器API-OnStateChange不触发

Question

如前所述，它只是YouTube开发者页面上添加的代码的精确副本

alert('State Changed')

作为onPlayerStateChange函数中要触发的第一件事。

但是，什么都没有发生……无论我如何看待它以及所做的更改，我都无法让onStateChange做任何事情。

我该如何解决这个问题？

Answer 1

作为临时解决方案，您只需要在onReady事件中添加事件侦听器：

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

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

另外，正如Google代码发布线程中提到的那样，您可以设置时间间隔并轮询播放器的当前状态，而不是监听onStateChange事件。这是执行此操作的示例代码片段：

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

Firefox和IE问题

其他人已经提到，如果Firefox放置在具有css属性的容器中，则Firefox不会实例化YouTube播放器display: none。Internet Explorer也将无法使用visibility: hidden。如果您发现这是问题所在，请尝试使用将该容器放置在页面之外left: -150%。

编辑：我对这个答案进行了更彻底的编辑，因为在2013年修复了原始错误之后，人们仍然看到此错误。