同一页面嵌入两个Vimeo视频点击对应按钮仅第一个响应如何解决

问题根因 #

你当前的代码核心问题有两个：

• 初始化播放器时使用document.querySelector('iframe')只会选取页面中第一个iframe元素，仅生成了第一个视频的播放器实例
• 所有播放/暂停按钮的点击事件都绑定到了同一个播放器实例上，自然只会控制第一个视频

优化方案 #

我们可以采用通用遍历的写法实现多视频独立控制，无需为每个视频单独编写ID绑定逻辑，后续新增视频也可以直接复用结构：

修改后HTML代码 #

给每个视频外层加统一类名vimeo-player-wrap，按钮用通用类名代替单独ID：

<!-- 第一个视频模块 -->
<div class="vimeo-player-wrap">
  <div class="embed-container">
     <iframe src="https://player.vimeo.com/video/544050102" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
  </div>
  <button class="btn-play">Play</button><button class="btn-pause">Pause</button>
</div>

<!-- 第二个视频模块 -->
<div class="vimeo-player-wrap">
  <div class="embed-container">
     <iframe src="https://player.vimeo.com/video/544050102" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
  </div>
  <button class="btn-play">Play</button><button class="btn-pause">Pause</button>
</div>

修改后JS代码 #

遍历每个视频模块分别初始化播放器、绑定对应控制按钮：

$( document ).ready(function() {
  // 遍历所有视频容器，分别处理
  $('.vimeo-player-wrap').each(function() {
    // 仅取当前容器内的iframe生成独立播放器实例
    const iframe = $(this).find('iframe')[0];
    const currentPlayer = new Vimeo.Player(iframe);
    
    // 绑定当前容器内播放按钮事件
    $(this).find('.btn-play').click(function() {
      currentPlayer.play();
    });
    
    // 绑定当前容器内暂停按钮事件
    $(this).find('.btn-pause').click(function() {
      currentPlayer.pause();
    });
  });
});

内容的提问来源于stack exchange，提问作者Beldion