HTML5视频播放器需用JavaScript+CSS手动实现鼠标悬停提示，核心是监听mousemove事件计算时间点并动态显示提示层，支持时间戳或缩略图预览，需节流、定位优化及移动端适配。
HTML5 视频播放器本身不提供鼠标悬停提示（如时间预览、缩略图等），需通过 JavaScript + CSS 手动实现。核心在于监听 mousemove 事件，计算当前鼠标位置对应的时间点，并动态显示提示层。
监听视频区域的鼠标移动
给 <video> 元素绑定 mousemove 事件，获取鼠标相对于视频容器的横坐标（clientX），再结合视频宽度和时长换算出预估时间点：
- 用
getBoundingClientRect()获取视频元素的可视区域位置 - 减去 left 值，得到鼠标在视频内部的 X 偏移量
- 按比例换算：当前时间 = (xOffset / videoWidth) × duration
- 注意判断
duration是否有效（加载完成前为NaN）
动态生成并定位提示层
创建一个绝对定位的 <div> 作为提示框，内容可包含时间戳（如 “02:18”）或缩略图：
- 提示层初始设为
display: none，仅在悬停时显示 - left 位置 = 鼠标 x 坐标 − 提示层宽度 ÷ 2，避免遮挡鼠标
- top 位置 = 视频顶部 − 提示层高度 − 8px（留出间距）
- 建议加
pointer-events: none，防止提示层干扰鼠标事件
优化体验的关键细节
直接跟随鼠标会抖动，且频繁重绘影响性能，需合理节流与状态控制：
立即学习“前端免费学习笔记（深入）”；
- 使用
requestAnimationFrame或 30–60ms 的setTimeout节流更新 - 鼠标移出视频区域时，立即隐藏提示层（监听
mouseleave） - 暂停状态下仍允许悬停提示，但不要触发播放
- 移动端默认无 hover，可选择禁用或改用点击触发（非必须）
缩略图预览的进阶实现
若需显示对应时间点的缩略图，需提前准备雪碧图（sprite）或通过后端接口按时间戳返回图片：
- 将视频帧按固定间隔（如每秒一张）截图，合并为横向雪碧图
- 根据计算出的时间点，算出对应帧索引，设置
background-position显示局部 - 更轻量做法：用
canvas+video.captureStream()截帧（兼容性有限，适合现代浏览器） - 注意缓存缩略图资源，避免重复请求
