多视频画廊海报交互异常：仅首个视频生效的技术修复咨询

问题根源 #

你遇到的核心问题是重复使用DOM元素ID——浏览器中ID是全局唯一的，getElementById只会返回第一个匹配的元素，所以只有第一个视频能正常绑定事件，后面的都失效。哪怕用querySelectorAll选中了所有overlay，没做好元素间的关联逻辑，也没法正确对应到每个视频。

修复步骤 #

1. 重构HTML结构：用类替代重复ID

把每个视频和对应的poster用一个父容器包裹，同时把重复的ID改成类名，确保每个视频组的元素能被正确关联：

<!-- 每个视频组用单独的容器包裹 -->
<div class="video-container">
  <video class="video-item" src="你的视频地址1" controls></video>
  <div class="video-overlay">
    <!-- 这里放poster图片 -->
    <img src="你的海报地址1" alt="视频海报">
  </div>
</div>

<div class="video-container">
  <video class="video-item" src="你的视频地址2" controls></video>
  <div class="video-overlay">
    <img src="你的海报地址2" alt="视频海报">
  </div>
</div>

<div class="video-container">
  <video class="video-item" src="你的视频地址3" controls></video>
  <div class="video-overlay">
    <img src="你的海报地址3" alt="视频海报">
  </div>
</div>

2. 调整CSS选择器

把原来针对ID的样式改成类选择器，保证样式正常生效：

.video-container {
  position: relative;
  /* 容器尺寸根据你的需求调整 */
  width: 300px;
  height: 200px;
}

.video-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

.video-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 编写批量绑定的JavaScript逻辑

通过遍历每个视频容器，找到当前容器内的视频和海报元素，一对一绑定事件：

// 获取所有视频容器
const videoGroups = document.querySelectorAll('.video-container');

videoGroups.forEach(group => {
  const video = group.querySelector('.video-item');
  const overlay = group.querySelector('.video-overlay');

  // 点击海报触发视频播放
  overlay.addEventListener('click', () => {
    video.play();
  });

  // 视频播放时隐藏海报
  video.addEventListener('play', () => {
    overlay.style.display = 'none';
  });

  // 视频暂停时显示海报
  video.addEventListener('pause', () => {
    overlay.style.display = 'block';
  });
});

为什么这个方案可行 #

用父容器video-container作为单元，确保每个视频和海报是一一对应的，不会出现事件绑定错对象的问题。遍历每个容器独立处理，所有视频组的逻辑都会生效，彻底解决重复ID导致的绑定失效问题。

内容的提问来源于stack exchange，提问作者Nxt Invent Solutions