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

Posted 2023-05-08

【中文标题】动态创建新 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?动态创建新 Vimeo 播放器列表并添加事件以暂停每个按钮单击的最佳方法是什么？

【发布时间】：2021-12-19 00:50:30

【问题描述】：

我正在制作一个包含多个 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();
          );
      

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

【参考方案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();
        );