基于Hover事件的视频轮播开发：悬停当前视频时暂停其余视频

问题说明 #

开发基于hover事件的视频轮播组件，需求为：

• 用户悬停某个视频时，该视频开始播放
• 悬停另一个视频时，暂停原播放视频，播放当前悬停的视频

已实现悬停播放功能，需补充暂停其余视频的逻辑。

解决方案 #

核心思路：每次触发hover事件时，先暂停所有正在播放的视频（排除当前悬停的视频），再播放当前目标视频。

修改后的代码 #

JavaScript

// 缓存所有视频容器节点
const videoOuters = document.querySelectorAll('.Main--VideoOuter');

videoOuters.forEach(outer => {
  outer.addEventListener('mouseover', function() {
    // 获取当前要播放的视频元素
    const currentVideo = this.querySelector('video');
    
    // 遍历所有视频，暂停非当前的播放中视频
    videoOuters.forEach(item => {
      const video = item.querySelector('video');
      if (video !== currentVideo && !video.paused) {
        video.pause();
      }
    });
    
    // 播放当前视频
    const playPromise = currentVideo.play();
    if (playPromise !== undefined) {
      playPromise.then(() => {
        // 播放成功后的UI逻辑可在此补充
      }).catch(error => {
        // 自动播放被浏览器阻止时的处理逻辑
      });
    }
  });
});

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.main {
  display: flex;
}

.main video {
  max-width: 300px;
  margin: 0 25px;
}

HTML

<div class="main">
  <div class="Main--VideoOuter">
    <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline></video>
  </div>
  <div class="Main--VideoOuter">
    <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline></video>
  </div>
  <div class="Main--VideoOuter">
    <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline></video>
  </div>
  <div class="Main--VideoOuter">
    <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline></video>
  </div>
  <div class="Main--VideoOuter">
    <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline></video>
  </div>
</div>

关键调整点 #

• 修复原代码中this.pause()的错误操作（误将容器元素当作视频元素处理）
• 添加遍历逻辑，确保每次只播放当前悬停的视频，其余视频自动暂停
• 提前缓存视频容器节点，避免重复DOM查询，提升性能

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