如何为HTML video元素实现类似YouTube的进度条悬停预览图效果

完全可以实现该效果，目前行业内主流有两种实现方案，适配不同的业务场景：

方案1：实时抽帧（适合短视频场景） #

核心逻辑：鼠标悬停进度条时，临时修改视频播放时间到hover对应位置，用canvas截取当前帧展示，完成后可切回原播放进度。

• 优点：无需提前处理视频资源，实现成本低
• 缺点：频繁跳转播放时间会产生性能开销，长视频预览加载延迟高，体验差
• 核心代码示例：

// 提前获取对应DOM元素
const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const seekbar = document.querySelector('.seekbar');
const previewPop = document.querySelector('.preview-pop');

seekbar.addEventListener('mousemove', (e) => {
  // 计算hover位置对应的视频时间点
  const hoverRate = e.offsetX / seekbar.offsetWidth;
  const targetTime = hoverRate * video.duration;

  // 等待视频跳转完成后绘制帧
  const onSeekFinish = () => {
    // 自定义预览图尺寸
    canvas.width = 160;
    canvas.height = 90;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 赋值给预览层展示
    previewPop.querySelector('img').src = canvas.toDataURL('image/jpeg');
    previewPop.style.left = `${e.offsetX - 80}px`;
    previewPop.style.display = 'block';
    // 移除临时监听避免内存泄漏
    video.removeEventListener('seeked', onSeekFinish);
  };
  video.addEventListener('seeked', onSeekFinish);
  video.currentTime = targetTime;
});

// 鼠标离开进度条隐藏预览
seekbar.addEventListener('mouseleave', () => {
  previewPop.style.display = 'none';
});

方案2：预生成雪碧图（适合全场景，YouTube采用该方案） #

核心逻辑：提前将视频按固定间隔抽帧，拼接为雪碧图，同时生成每帧对应的时间区间、雪碧图坐标映射表。前端hover时直接通过映射表定位雪碧图展示对应帧即可。

• 优点：预览加载无延迟，性能开销极低，适配所有时长的视频
• 缺点：需要服务端提前处理视频资源，生成对应的雪碧图和映射文件
• 实现步骤：
  • 服务端侧：对上传的视频进行预处理，按1-2秒间隔抽帧，拼接成雪碧图，同时生成JSON格式的帧映射表，记录每帧的起始时间、对应雪碧图的坐标偏移量
  • 前端侧：视频加载时同步预加载雪碧图和映射表，鼠标悬停进度条时计算目标时间，查询映射表得到对应帧的偏移量，通过CSS的background-position属性定位雪碧图，展示对应预览帧即可

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