javascript YouTube iframe 播放器 API - OnStateChange 未触发
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17078094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
YouTube iframe player API - OnStateChange not firing
提问by Learning
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.
我实际上只是从 YouTube 开发人员页面YouTube Player API Reference for iframe Embeds 中复制并粘贴了代码(从标题“入门”下方)。唯一的区别是我在状态改变时添加了一个警报来触发,因为我认为我在 onPlayerStateChange 函数中做错了。
You can see the jsFiddle at http://jsfiddle.net/jesMv/.
你可以在http://jsfiddle.net/jesMv/看到 jsFiddle 。
As stated, it's just an exact copy of the code from the YouTube developer page with the added
如前所述,它只是 YouTube 开发者页面中代码的精确副本,并添加了
alert('State Changed')
as the first thing to fire in the onPlayerStateChange function.
作为在 onPlayerStateChange 函数中触发的第一件事。
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.
然而,什么也没有发生……无论我如何看待这个和我改变了什么,我都无法让 onStateChange 做任何事情。
How can I fix this problem?
我该如何解决这个问题?
回答by Matt Koskela
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
iFrame Player API 有一个临时问题(已于 2013 年 6 月修复),您可以在此处阅读:https: //code.google.com/p/gdata-issues/issues/detail?id=4706
Jeff Posnick posted a temporary workaround here: http://jsfiddle.net/jeffposnick/yhWsG/3/
Jeff Posnick 在此处发布了一个临时解决方法:http: //jsfiddle.net/jeffposnick/yhWsG/3/
As a temporary fix, you just need to add the event listener within the onReady event:
作为临时修复,您只需要在 onReady 事件中添加事件侦听器:
function onReady() {
player.addEventListener('onStateChange', function(e) {
console.log('State is:', e.data);
});
}
Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).
确保从 YT.PLAYER 构造函数中删除 onStateChange 事件(请参阅 jsfiddle)。
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:
此外,正如有人在 Google Code Issue Thread 上提到的,您设置了一个时间间隔并轮询播放器的当前状态,而不是侦听 onStateChange 事件。这是用于执行此操作的示例代码片段:
setInterval( function() {
var state = player.getPlayerState();
if ( playerState !== state ) {
onPlayerStateChange( {
data: state
});
}
}, 10);
Firefox and IE Issues
Firefox 和 IE 问题
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%
.
其他人提到如果将 YouTube 播放器放置在具有 css 属性的容器中,Firefox 将不会实例化display: none
。Internet Explorer 也不能与visibility: hidden
. 如果您发现这是问题所在,请尝试使用类似left: -150%
.
Steve Meisner talks about this here: YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?
Steve Meisner 在这里谈到了这一点:YouTube API 似乎没有在 Firefox 中加载, IFrame 被加载,但是 onPlayerReady 事件从不触发?
And another related SO question: YouTube iframe API - onReady and onStateChanged events not firing in IE9
另一个相关的 SO 问题:YouTube iframe API - onReady 和 onStateChanged 事件未在 IE9 中触发
Edit: I've edited this answer to be more thorough because people are still seeing this error after the original bug was fixed in 2013.
编辑:我已经编辑了这个答案更彻底,因为在 2013 年修复原始错误后人们仍然看到这个错误。
回答by Chris Moschini
onStateChange does not work in any version of Internet Explorer or Edge. I assume it will begin working once Microsoft moves Edge over to being Chromium-based. But whether IE9, 11, or Edge, I cannot get this event to fire, even when it fires cleanly in Chrome, identical code.
onStateChange 不适用于任何版本的 Internet Explorer 或 Edge。我认为一旦 Microsoft 将 Edge 转移到基于 Chromium 的位置,它就会开始工作。但是无论是 IE9、11 还是 Edge,我都无法触发此事件,即使它在 Chrome 中完全触发,代码相同。