YouTube API - 动态添加事件监听器答案

【问题标题】：YouTube API - Dynamically add event listenersYouTube API - 动态添加事件监听器
【发布时间】：2016-04-12 11:07:30
【问题描述】：

我正在使用 Youtube API 重新设置动态添加到页面的嵌入视频的样式。

我无法弄清楚如何设置自定义控件。每个视频嵌入都有一个自定义控件，需要在相关嵌入上触发 playVideo() 函数。

当每个播放器被初始化时，它会触发 onPlayerReady 函数。我的问题是我不知道如何将点击事件绑定到新玩家自定义按钮，该按钮将为正确的玩家触发 playVideo() 函数。

我在这里做了很多搜索，但找不到使用多个嵌入的参考。

最终更新

由于 jQuery 可用，我在此解决方案中使用它...

function onPlayerReady(event) {
  // bind events
  var playButton = $(event.target.c).parent().find('.immersive-video__play');
  playButton.on('click', function() {
    event.target.playVideo();
  });
}

更新

这是我目前的工作解决方案...

var buttonCount = 0;

function onPlayerReady(event) {
  // bind events
  var playButtons = document.getElementsByClassName("immersive-video__play");
  playButtons[buttonCount].addEventListener('click', function() {
    event.target.playVideo();
  });

  buttonCount++;
}

原创

function onPlayerReady(event) {
  // bind event
  var playButtons = document.getElementsByClassName("immersive-video__play");

  // I don't know how to link the button to the player?
  playButtons[].addEventListener('click', function() {
      player[].playVideo();
  });

}

var player = [];

function checkYT() {
  var check = setInterval(function() {
    if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
      var tar = document.getElementsByClassName('immersive-video__embed');

      for (var i = 0; i < tar.length; i++) {
        var id = tar[i].dataset.video;
        var container = document.getElementsByClassName('video-holder');
        player[i] = new YT.Player(container[i], {
          videoId: id,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      clearInterval(check);
      return;
    } else {
      console.log('not ready');
    }
  }, 20);
}

【问题讨论】：

标签： javascript youtube-api

【解决方案1】：

确保iframe src URL 的末尾有?enablejsapi=1，如下所示：

<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>

将参数的值设置为 1 可以通过 IFrame 或 JavaScript Player API 调用来控制播放器。默认值为 0，表示无法使用这些 API 控制播放器。

检查您的 Player 对象，该对象能够控制该视频。使用该 iframe 上的 id 属性创建它。以下是来自 tutorial 的示例：

var player;

function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

然后检查“玩家就绪”回调和绑定事件。它将自动传递事件对象，其中event.target 是播放器。

function onPlayerReady(event) {

  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });

}

希望这会有所帮助！

【讨论】：