YouTube API-动态添加事件侦听器

Question

我正在使用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);
}

Answer 1

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

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

将参数值设置为1可以通过IFrame或JavaScriptPlayerneneneba API调用控制播放器。默认值为0，这意味着不能使用这些API控制播放器。

检查您的Player对象，该对象能够控制该视频。使用该iframe上的id属性创建它。以下是本教程中的一个示例：

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();
  });
}

希望这能有所帮助！