YT iframe API 使用 addEventListener 订阅事件时抛出错误

Question

我在使用 YT iframe 时偶然发现了一个问题 API。

我已经设置了一个 YT iframe，然后我立即加载了 iframe API 脚本：

<div class="youtube-wrapper">
  <iframe
    class="youtube"
    src="https://www.youtube.com/embed/{{youtube_id}}?controls=1"
    frameborder="0"
    allowfullscreen
    enablejsapi="true">
  </iframe>
  <script src="//www.youtube.com/iframe_api" async></script>
</div>

我不需要支持旧版浏览器，所以我选择这样加载。

在文档头部我定义了这个：

window.onYoutubePlayerStateChange = console.log;
window.onYouTubeIframeAPIReady = function() {
  window.ytPlayers = $('iframe.youtube[enablejsapi]')
    .map(function(youtubeIframe) {
      return new YT.Player(youtubeIframe);
    })
    .get();
  window.ytPlayers.forEach(function(ytPlayer) {
    ytPlayer.addEventListener('onStateChange', 'onYoutubePlayerStateChange')
  })
};

这会在使用 Uncaught type error: Cannot read property 'subscribe' of null 添加事件侦听器时中断。看看它在哪里中断，它在 www-widgetapi.js:107:7 中，在

中

this.f.subscribe(a,c)

this.f 为空。

我还尝试仅在 API 准备就绪时添加事件侦听器，

var player = new YT.Player(ytIframe, {
  events: {
    'onReady': function(e) { e.target.addEventListener(...); }
  }
});

，我尝试在那里添加一个 onStateChange 事件处理程序，但这些处理程序根本不会被调用。

知道会发生什么吗？

Answer 1

似乎与文档相反，设置 iframe enablejsapi="true" 不起作用，只有当您将 enablejsapi=1 查询参数添加到 iframe src 时，播放器才能正确设置。

（我也没有通过滥用 jQuery.map 方法来帮助自己，该方法将元素的索引作为回调的第一个参数）

YT iframe API 使用 addEventListener 订阅事件时抛出错误

YT iframe API throwing an error when subscribing to events using addEventListener

javascript

youtube

youtube-iframe-api