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"不起作用，只有当您向iframe src添加enablejsapi=1查询参数时，才能正确设置播放器。

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

使用addEventListener

1 个答案: