YouTube iframe播放器API - OnStateChange未触发 [英] YouTube iframe player API - OnStateChange not firing

问题描述

我真的只是复制&粘贴了YouTube开发者页面中的代码 iframe嵌入的YouTube播放器API参考 （来自入门标题下方）。唯一的区别是，当状态改变时我添加了一个警告，因为我认为我在onPlayerStateChange函数中做错了。

I have literally just copy & pasted the code from the YouTube developer page YouTube Player API Reference for iframe Embeds (from underneath the heading "Getting Started"). The only difference, is that I added an alert to fire when the state changed, because I thought I was doing something wrong within the onPlayerStateChange function.

你可以看到jsFiddle在 http://jsfiddle.net/jesMv/ 。

You can see the jsFiddle at http://jsfiddle.net/jesMv/.

如上所述，它只是来自YouTube开发者页面的代码的精确副本，其中添加了

As stated, it's just an exact copy of the code from the YouTube developer page with the added

alert('State Changed')

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

as the first thing to fire in the onPlayerStateChange function.

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

Nothing is happening, however... No matter how I look at this and what I change, I simply can't get the onStateChange to do anything.

如何解决此问题？

推荐答案

iFrame播放器API存在暂时性问题（您可以在此处阅读以下内容： https://code.google.com/p/gdata-issues/issues/detail?id=4706

There was a temporary issue with the iFrame Player API (which was fixed in June 2013) that you can read about here: https://code.google.com/p/gdata-issues/issues/detail?id=4706

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

Jeff Posnick posted a temporary workaround here: http://jsfiddle.net/jeffposnick/yhWsG/3/

作为临时修复，您只需在onReady事件中添加事件监听器：

As a temporary fix, you just need to add the event listener within the onReady event:

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

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

Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).

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

Also, as someone mentioned on the Google Code Issue Thread, you set an interval and poll the player for its current state instead of listening for the onStateChange event. Here is an example code snippet for doing that:

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

Firefox和IE问题

其他人提到如果将Firefox播放器置于具有css属性 display：none 的容器中，Firefox将无法实例化该播放器。 Internet Explorer也无法使用 visibility：hidden 。如果您发现这是问题，请尝试将容器放在页面上，例如 left：-150％。

Other people have mentioned that Firefox will not instantiate the YouTube Player if it is placed in a container with the css property display: none. Internet Explorer will also not work with visibility: hidden. If you're finding this to be the issue, try positioning the container off the page with something like left: -150%.

Steve Meisner在这里谈到这个问题： YouTube API似乎没有在Firefox中加载，IFrame被加载，但onPlayerReady事件从未触发？

Steve Meisner talks about this here: YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?

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

And another related SO question: YouTube iframe API - onReady and onStateChanged events not firing in IE9

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

这篇关于YouTube iframe播放器API - OnStateChange未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！