如何使用HTML/CSS实现视频仅在鼠标悬停时播放？

CSS的:hover只能控制元素样式，没法直接操作视频的播放状态和音频设置，得用JavaScript结合事件监听来实现需求。下面是完整的可运行示例：

1. HTML结构（多列视频布局） #

<div class="video-grid">
  <div class="video-item">
    <video src="your-video-1.mp4" muted playsinline></video>
  </div>
  <div class="video-item">
    <video src="your-video-2.mp4" muted playsinline></video>
  </div>
  <!-- 可添加更多视频项 -->
</div>

• muted：默认静音，规避浏览器自动播放限制
• playsinline：允许视频在页面内播放（移动端必备）

2. CSS多列布局 #

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 20px;
}

.video-item {
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.video-item video {
  width: 100%;
  height: auto;
  display: block;
}

3. JavaScript交互逻辑 #

// 获取所有视频元素
const videos = document.querySelectorAll('.video-item video');

videos.forEach(video => {
  // 初始状态：暂停视频
  video.pause();

  // 鼠标进入时播放+开启声音
  video.addEventListener('mouseenter', () => {
    video.play().catch(err => {
      // 处理播放失败（比如浏览器自动播放限制）
      console.log('播放失败:', err);
    });
    video.muted = false;
  });

  // 鼠标离开时暂停+恢复静音
  video.addEventListener('mouseleave', () => {
    video.pause();
    video.muted = true;
  });
});

关键注意事项 #

• 浏览器自动播放策略：多数现代浏览器要求视频默认静音才能触发自动播放，所以初始muted设置不可少
• 视频加载适配：如果视频加载缓慢，可监听loadeddata事件确保视频就绪后再绑定交互：

  video.addEventListener('loadeddata', () => {
    video.pause();
  });
  

• 移动端适配：可额外绑定touchstart和touchend事件，模拟hover交互效果

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