如何实现鼠标悬停/触摸播放视频、播放结束后自动恢复图片显示的效果

1. 实现思路 #

• 卡片默认展示缩略图，视频标签默认隐藏、不预加载资源
• 监听鼠标悬停/触摸事件，触发时显示视频、加载并播放
• 监听鼠标移出/视频播放完成事件，触发时暂停视频、重置进度、切回缩略图展示

2. 代码实现 #

2.1 HTML结构 #

<div class="video-card">
  <!-- 视频缩略图 -->
  <img src="你的缩略图地址.jpg" alt="视频封面" class="video-thumb">
  <!-- 视频元素，默认静音、不预加载、移动端内联播放 -->
  <video src="你的视频地址.mp4" class="hover-video" muted preload="none" playsinline></video>
</div>

<!-- 可批量生成多个上述video-card结构，对应不同视频 -->

2.2 CSS样式 #

.video-card {
  position: relative;
  width: 320px; /* 自定义卡片宽度 */
  height: 180px; /* 自定义卡片高度，保持和视频/缩略图比例一致 */
  overflow: hidden;
  cursor: pointer;
}

.video-thumb, .hover-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* 默认隐藏视频 */
.hover-video {
  display: none;
}

/* 播放状态下显示视频，隐藏缩略图，适配移动端触摸场景 */
.video-card.is-playing .hover-video {
  display: block;
}
.video-card.is-playing .video-thumb {
  display: none;
}

2.3 JavaScript逻辑 #

// 获取所有视频卡片
const videoCards = document.querySelectorAll('.video-card');

videoCards.forEach(card => {
  const video = card.querySelector('.hover-video');
  const thumb = card.querySelector('.video-thumb');
  
  // 鼠标进入/触摸触发播放
  const handlePlay = () => {
    // 标记播放状态
    card.classList.add('is-playing');
    // 重置视频进度到开头
    video.currentTime = 0;
    // 加载视频（preload设为none时仅此处触发加载）
    video.load();
    // 播放视频，用catch捕获浏览器拦截的错误
    video.play().catch(err => console.log('自动播放被拦截:', err));
  };
  
  // 鼠标离开/播放结束触发重置
  const handleReset = () => {
    // 移除播放状态
    card.classList.remove('is-playing');
    video.pause();
    video.currentTime = 0;
  };

  // 绑定事件
  card.addEventListener('mouseenter', handlePlay);
  card.addEventListener('touchstart', handlePlay);
  card.addEventListener('mouseleave', handleReset);
  video.addEventListener('ended', handleReset);
});

3. 注意事项 #

• 必须给video添加muted属性，现代浏览器禁止非静音媒体自动播放，否则会触发播放失败
• 建议给video设置preload="none"，首屏仅加载缩略图，减少页面初始加载带宽消耗
• 如果卡片数量较多，可以添加防抖逻辑，避免用户快速划过多个卡片时触发大量视频加载请求

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