鼠标悬停触发视频播放且禁止循环的实现方案咨询

没问题！要搞定这个需求，咱们得结合CSS和一点点JavaScript——毕竟单纯CSS没法精准控制视频播放结束后的状态。下面是一步步的实现方法：

1. 调整HTML结构 #

首先确保你的视频元素带上必要的属性，比如静音（浏览器要求自动播放视频必须静音）、禁止循环，还有海报图（用来显示默认状态和播放结束后的画面）：

<div class="video-bg">
  <!-- 这里的poster设为视频最后一帧的图片 -->
  <video class="bg-video" src="your-video.mp4" poster="video-last-frame.jpg" playsinline muted loop="false"></video>
  <!-- 你的div内容放在这里 -->
  <div class="content">我是div里的内容</div>
</div>

2. 优化CSS样式 #

保持视频默认隐藏，悬停时显示，同时让div默认显示视频最后一帧作为背景，确保视觉连贯性：

.video-bg {
  position: relative;
  width: 600px;
  height: 400px;
  /* 默认背景用视频最后一帧，和poster保持一致 */
  background: url('video-last-frame.jpg') center/cover no-repeat;
  cursor: pointer;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none; /* 防止视频干扰div的hover事件 */
  transition: opacity 0.3s ease;
}

/* 悬停时显示视频 */
.video-bg:hover .bg-video {
  opacity: 1;
}

/* 内容层级要高于视频 */
.content {
  position: relative;
  z-index: 1;
  color: white;
  padding: 2rem;
}

3. 用JavaScript控制播放逻辑 #

这一步是核心：监听视频的播放结束事件，让它停在最后一帧；同时处理鼠标离开时的重置，保证下次悬停能重新播放：

const video = document.querySelector('.bg-video');
const videoContainer = document.querySelector('.video-bg');

// 视频播放结束时，暂停在最后一帧
video.addEventListener('ended', () => {
  video.pause();
});

// 鼠标离开容器时，重置视频到起始位置并暂停
videoContainer.addEventListener('mouseleave', () => {
  video.currentTime = 0;
  video.pause();
});

// 鼠标悬停时开始播放视频
videoContainer.addEventListener('mouseenter', () => {
  video.play();
});

额外注意事项 #

• 务必把poster和div的背景图都设置为视频的最后一帧，这样默认状态、播放结束后的状态视觉上完全统一，不会出现突兀的跳转。
• 如果不想手动截取最后一帧，可以用视频编辑工具导出最后一帧，或者在页面加载时通过JS自动获取，但手动截取是最省心高效的方式。

内容的提问来源于stack exchange，提问作者Eduardo João