YouTube iframe 播放器 API - OnStateChange 未触发

Posted 2023-02-24

【中文标题】YouTube iframe 播放器 API - OnStateChange 未触发

【英文标题】：YouTube iframe player API - OnStateChange not firing

【发布时间】：2013-06-09 07:24:47

【问题描述】：

我只是从 YouTube 开发者页面 YouTube Player API Reference for iframe Embeds 复制并粘贴了代码（从标题“入门”下方）。唯一的区别是，我添加了一个在状态改变时触发的警报，因为我认为我在 onPlayerStateChange 函数中做错了。

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

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

alert('State Changed')

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

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

我该如何解决这个问题？

【参考方案1】：

iFrame Player 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 事件。这是一个示例代码 sn-p 用于执行此操作：

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% 之类的内容将容器置于页面之外。

Steve Meisner 在这里谈到这个：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 年修复原始错误后，人们仍然会看到这个错误。

【讨论】：

这个问题现在看来我写的还没有解决（PT 时间 00.44）。

如果您使用的是 iframe 而不是 api 加载后被替换的 div，则可能无法正常工作

就我而言，这不是解决方案（这个错误现在应该解决了吗？）。我在视频容器上有display:none，API 没有触发。更多信息：***.com/a/22199021/406171

在 2014 年，我看到了这个休息时间，并在大约 30 分钟后神秘地重新开始工作。此答案中给出的修复程序在损坏时对我不起作用。

谢谢！我需要轮询解决方法才能使其正常工作...轮询功能的两个更新（为了完整起见）： - 添加var playerState 作为第一行，以初始化变量 - 添加行playerState = state，以保持跟踪事件触发后的新状态。

【参考方案2】：

onStateChange 在任何版本的 Internet Explorer 或 Edge 中都不起作用。我认为一旦 Microsoft 将 Edge 转移到基于 Chromium 的位置，它就会开始工作。但无论是 IE9、11 还是 Edge，我都无法触发此事件，即使它在 Chrome 中完全触发，代码相同。