嘿，我来帮你搞定这两个问题！咱们先拆解问题根源，再一步步修复代码：

问题原因分析 #

1. 鼠标移开后视频继续播放：你的showThumbnail()只负责显示图片，却没暂停视频，也没清理视频的播放状态，导致视频在后台继续运行。
2. 播放到结束帧不显示缩略图：视频到结束时间后只执行了暂停操作，没触发显示缩略图的逻辑。

修复后的完整代码 #

JavaScript 部分

// 提前获取DOM元素，避免重复查询浪费性能
const thumbImg = document.querySelector('img');
const video = document.getElementById('yourVideoId');
const starttime = 7; // 视频起始播放秒数
const endtime = 10; // 视频结束播放秒数

// 单独定义时间更新的处理函数，避免重复绑定事件
function handleTimeUpdate() {
  if (this.currentTime >= endtime) {
    this.pause();
    showThumbnail(); // 播放到结束点时自动显示缩略图
  }
}

function playVideo() {
  thumbImg.style.display = 'none';
  
  // 先移除旧的监听，防止多次悬停后重复绑定事件
  video.removeEventListener('timeupdate', handleTimeUpdate);
  // 添加新的时间更新监听
  video.addEventListener('timeupdate', handleTimeUpdate);
  
  video.load();
  video.play();
  try {
    video.currentTime = starttime;
  } catch (ex) {
    console.error('设置播放起始时间失败:', ex);
  }
}

function showThumbnail() {
  thumbImg.style.display = 'inherit';
  // 暂停视频并重置播放位置到起始点
  video.pause();
  video.currentTime = starttime;
  // 移除时间更新监听，节省浏览器资源
  video.removeEventListener('timeupdate', handleTimeUpdate);
}

HTML 部分（优化了布局，让视频和缩略图重叠）

<div style="position: relative; width: 240px; height: 320px;">
  <video id="yourVideoId" width="240" height="320" onmouseover="playVideo()" onmouseout="showThumbnail()">
    <source src="assets/video/sample.mp4" type="video/mp4">
  </video>
  <img src="assets/images/banner.png" width="240" height="320" style="position: absolute; top: 0; left: 0;">
</div>

关键改动说明 #

• 修复鼠标移开问题：在showThumbnail()里新增了暂停视频、重置播放位置的逻辑，同时移除了不必要的事件监听，避免资源浪费。
• 修复结束帧不显示缩略图：在视频时间更新的回调里，当播放到结束时间时主动调用showThumbnail()，触发显示缩略图的操作。
• 优化事件绑定：把时间更新的处理函数单独提取出来，每次播放前先移除旧监听，防止多次悬停后重复绑定导致的异常行为。
• 布局优化：用相对定位容器+绝对定位的图片，让缩略图和视频完全重叠，确保显示缩略图时能覆盖视频，提升视觉体验。

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