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++;
}

ORIGINAL

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网址最后有?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控制播放器。

检查能够控制该视频的播放器对象。使用该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();
  });

}

希望这有帮助！

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

1 个答案: