HTML5视频快进、快退和定点跳转的核心是控制video元素的currentTime属性；通过读取或设置该属性（单位：秒），结合loadedmetadata事件监听、Math.min/max边界处理、range进度条同步及timeupdate事件，可实现精准时间跳转与交互控制。
HTML5 视频的快进、快退和定点跳转，核心是控制 video 元素的 currentTime 属性。只要能读取和设置这个属性，就能实现任意时间点的跳转操作。
获取与设置当前播放时间
video.currentTime 是一个以秒为单位的浮点数，表示当前播放位置。读取它可获知进度，赋值则直接跳转：
- 读取：
const time = video.currentTime; - 设置：
video.currentTime = 60; // 跳到第60秒 - 注意：若视频未加载元数据（如时长），
currentTime可能无法准确设置，建议监听loadedmetadata事件后再操作
实现快进/快退功能
快进快退本质是“在当前时间基础上增减固定秒数”。常用步长为 5 秒或 10 秒：
- 快进：
video.currentTime = Math.min(video.duration, video.currentTime + 10); - 快退：
video.currentTime = Math.max(0, video.currentTime - 10); -
Math.min/max防止跳转超出视频范围（开头或结尾） - 可绑定到按钮或键盘快捷键（如 ← → 方向键）
支持拖拽进度条跳转
使用 模拟进度条是最常见方式：
- 将 range 的
max设为video.duration，value绑定到video.currentTime - 监听
input事件实时更新时间：video.currentTime = range.value; - 监听
change事件（松开鼠标后）再恢复播放，避免拖拽过程中频繁触发播放 - 需配合
timeupdate事件反向同步 range 的 value，保持视觉一致
精确跳转到指定时间点（如章节、标记）
可通过按钮、链接或输入框触发精准跳转：
- 按钮示例：
- JavaScript 函数：
function jumpTo(seconds) { video.currentTime = seconds; video.play(); } - 输入框方案：用户输入时间（支持 "mm:ss" 或秒数），解析后跳转（可用
parseInt或正则提取分秒） - 跳转后调用
play()可确保继续播放（尤其在暂停状态下）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
