动态创建新 Vimeo 播放器列表并添加事件以在单击按钮时暂停每个播放器的最佳方法是什么？

Question

我正在制作一个包含多个 Vimeo 视频的网站，并使用 Vimeo 播放器 SDK 在我单击自定义按钮时暂停视频。

这里是 Javascript:

var iframe = document.querySelectorAll(".iframe_popup");

      for (var i = 0; i < iframe.length; i++) {
        var player1 = new Vimeo.Player(iframe[0]);
        var player2 = new Vimeo.Player(iframe[1]);
        var player3 = new Vimeo.Player(iframe[2]);
        var player4 = new Vimeo.Player(iframe[3]);
        var player5 = new Vimeo.Player(iframe[4]);
        var player6 = new Vimeo.Player(iframe[5]);
        var player7 = new Vimeo.Player(iframe[6]);
        var player8 = new Vimeo.Player(iframe[7]);
        var player9 = new Vimeo.Player(iframe[8]);
        var player10 = new Vimeo.Player(iframe[9]);
        var player11 = new Vimeo.Player(iframe[10]);
        var player12 = new Vimeo.Player(iframe[11]);
        var player13 = new Vimeo.Player(iframe[12]);
        var player14 = new Vimeo.Player(iframe[13]);

        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player1.pause();
          });

        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player2.pause();
          });

        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player3.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player4.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player5.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player6.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player7.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player8.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player9.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player10.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player11.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player12.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player13.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player14.pause();
          });
      }

显然这很乱，而且代码很多。我不确定重写它的最佳方法，所以我只是遍历每个新播放器，然后创建一个函数，当我单击 'close' 按钮时会暂停视频。

Answer 1

因为您正在使用循环，所以您不需要每次都声明全部。

var iframe = document.querySelectorAll(".iframe_popup");

for (var i = 0; i < iframe.length; i++) {
    var player = new Vimeo.Player(iframe[i]);

    document
        .querySelector(".close,.popup_video")
        .addEventListener("click", function() {
            player.pause();
        });
}

动态创建新 Vimeo 播放器列表并添加事件以在单击按钮时暂停每个播放器的最佳方法是什么？

What is the best way to dynamically create a list of new Vimeo players and add an event to pause each on button click?

javascript

vimeo

vimeo-api

vimeo-player