Question

我真的只是复制＆amp;粘贴了YouTube开发人员网页 YouTube Player API Reference for iframe Embeds 中的代码（来自“使用入门”标题下方）。唯一的区别是，当状态改变时我添加了一个警报，因为我认为我在onPlayerStateChange函数中做错了。

您可以在http://jsfiddle.net/jesMv/找到jsFiddle。

如上所述，它只是YouTube开发者页面中添加了

的代码的精确副本

alert('State Changed')

是在onPlayerStateChange函数中触发的第一件事。

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

如何解决此问题？

Answer 1

iFrame播放器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代码问题主题中提到的那样，您设置一个间隔并轮询播放器的当前状态，而不是监听onStateChange事件。以下是执行此操作的示例代码段：

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

Firefox和IE问题

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

史蒂夫迈斯纳在这里谈到这个问题：YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?

另一个相关的SO问题：YouTube iframe API - onReady and onStateChanged events not firing in IE9

编辑：我已将此答案编辑为更加彻底，因为人们在2013年修复原始错误后仍然看到此错误。

Answer 2

onStateChange不适用于任何版本的Internet Explorer或Edge。我认为一旦Microsoft将Edge迁移到基于Chromium的平台上，它将开始工作。但是，无论是IE9、11还是Edge，即使该事件在Chrome浏览器中完全相同的代码都能触发，我也无法触发该事件。

YouTube iframe播放器API - OnStateChange未触发

2 个答案: