javascript - 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方法来帮助自己，该方法将元素的索引作为回调的第一个参数)