解决多视频页面仅首个视频Mouseover预览生效的问题

问题出在你用了唯一ID来定位视频元素——getElementById只会返回页面中第一个匹配的元素，所以只有第一个视频生效。要让所有视频都实现交互，需要改用类选择器遍历所有视频容器，给每个容器单独绑定逻辑。

具体实现步骤 #

1. 调整HTML结构（用类代替唯一ID）

给所有视频、海报、容器统一使用类名，确保每个视频组的结构一致：

<div class="video-container">
  <img class="video-poster" src="your-poster-url.jpg" alt="视频海报">
  <video class="preview-video" src="your-video-url.mp4" muted loop></video>
</div>
<div class="video-container">
  <img class="video-poster" src="another-poster-url.jpg" alt="视频海报">
  <video class="preview-video" src="another-video-url.mp4" muted loop></video>
</div>
<!-- 重复此结构到10个视频 -->

• 给视频添加muted和loop属性：浏览器默认禁止有声视频自动播放，静音状态才能正常触发预览；循环属性提升预览体验。

2. 基础CSS布局

让海报和视频重叠在容器内，默认显示海报、隐藏视频：

.video-container {
  position: relative;
  width: 300px; /* 按需调整尺寸 */
  height: 200px;
  cursor: pointer;
  overflow: hidden;
}
.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
}
.preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 2;
  display: none;
}

3. JavaScript交互逻辑

遍历所有视频容器，给每个容器绑定鼠标事件，操作当前容器内的视频和海报：

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

// 遍历每个容器，绑定独立的交互逻辑
allVideoContainers.forEach(container => {
  const video = container.querySelector('.preview-video');
  const poster = container.querySelector('.video-poster');

  // 鼠标悬停：隐藏海报、显示并播放视频
  container.addEventListener('mouseenter', () => {
    poster.style.display = 'none';
    video.style.display = 'block';
    video.play();
  });

  // 鼠标移出：暂停视频、隐藏视频、显示海报（可选重置播放进度）
  container.addEventListener('mouseleave', () => {
    video.pause();
    video.style.display = 'none';
    poster.style.display = 'block';
    video.currentTime = 0; // 重置到开头，下次预览从起始帧播放
  });
});

核心逻辑说明 #

• 用querySelectorAll获取所有视频容器，确保不会遗漏任何一个；
• 遍历过程中，通过container.querySelector定位当前容器内的视频和海报，保证每个视频的交互独立，不会互相干扰；
• 所有操作都基于当前容器的上下文，避免全局选择器导致的冲突。

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