单页多案例模块时getElementById控制Vimeo视频失效如何解决

第一步：修正HTML重复ID问题 #

首先把重复的ID替换为class，符合HTML规范：

<div class="caseStudy">
  <button class="playButton"></button>
  <div class="caseStudy_poster"></div>
  
  <iframe class="caseStudy_video" src="<vimeo-url-here>" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" webkitallowfullscreen mozallowfullscreen allowfullscreen>
  </iframe>
</div>

第二步：替换JavaScript代码 #

// 获取所有案例研究模块
const caseStudyModules = document.querySelectorAll('.caseStudy');

// 逐个初始化每个模块的播放逻辑
caseStudyModules.forEach(module => {
  // 只在当前模块内查询对应的元素，避免和其他模块混淆
  const poster = module.querySelector('.caseStudy_poster');
  const button = module.querySelector('.playButton');
  const iframe = module.querySelector('.caseStudy_video');
  const player = new Vimeo.Player(iframe); // 提前初始化播放器，不用每次点击都新建

  // 绑定点击事件
  [poster, button].forEach(el => {
    el.addEventListener('click', () => {
      // 隐藏当前模块的封面和按钮
      poster.style.visibility = 'hidden';
      button.style.visibility = 'hidden';
      // 播放当前模块的视频
      player.play();
    })
  })

  // 监听当前视频的播放结束事件
  player.on('ended', () => {
    // 恢复当前模块的封面和按钮显示
    poster.style.visibility = 'visible';
    button.style.visibility = 'visible';
  })
})

核心修改逻辑说明 #

• 不再全局查询元素，改为每个caseStudy模块内部查询子元素，从根源上避免多个模块之间的元素混淆
• 提前初始化每个模块的Vimeo播放器实例，不用每次点击都重复创建，性能更好
• 每个模块的事件绑定独立，播放、结束逻辑互不影响

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