YouTube，在PlayerReady上，使用for循环获取数组中与单击箭头位置匹配的视频ID并播放

Question

我有以下小提琴：http://jsfiddle.net/inkedraskal/cyhyjht5/3/

在小提琴中，你会看到你可以通过点击单个视频来播放和暂停它们（播放一个，如果你点击另一个，它将停止当前视频并播放你点击的内容）。

我想不出的是如何让自定义播放按钮工作。我有下面的for循环，但我猜点击它与数组中的位置不匹配。如果我点击第三个"播放"跨度，它应该播放第三个视频：

function onPlayerReady(event) {
  for (var i = 0; i < players.length; i++) {
    // if (players[i].getVideoUrl() != temp) players[i].stopVideo();
    for (var q = 0; q < ytPlayButtons.length; q++) {
      playButton = document.getElementById(ytPlayButtons[q]);
      playButton.addEventListener("click", function() {
        console.log(playButton);
        players[i].playVideo();
      });
    }
  }
}

Answer 1

嗨，我已经编辑了你小提琴并重新制作onPlayerReady（）函数：

小提琴

那里有新的代码：

var videoCount = 1;
function onPlayerReady(event) {
  $("#play-"+videoCount).on("click", function() {
    console.log("play-"+videoCount);
    event.target.playVideo();
  });
  videoCount++;
}

这是一个简单的方法。你应该获取视频的id，然后以某种方式将其链接到按钮。

初始代码的问题是event.target包含一个视频，并且函数循环页面中的所有视频，所以不需要在里面写更多的循环。

从youtubeapi，你甚至可以使用这个功能来处理视频：

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
}

ytplayer将具有与event.target相同的属性，并且您有免费使用的视频ID