YouTube iframe 播放器 API - OnStateChange 未触发

问题描述

我实际上只是复制 &从 YouTube 开发者页面粘贴代码 YouTube Player API Reference for iframe Embeds(从标题入门"下方).唯一的区别是，我添加了一个在状态改变时触发的警报，因为我认为我在 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.

您可以在 http://jsfiddle.net/jesMv/ 上查看 jsFiddle.

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.

我该如何解决这个问题?

How can I fix this problem?

推荐答案

iFrame Player API 存在一个临时问题(已于 2013 年 6 月修复)，您可以在此处阅读: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 代码问题线程中提到的那样，您设置了一个间隔并轮询播放器的当前状态，而不是监听 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 问题

其他人提到，如果将 YouTube 播放器放在具有 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 未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！