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 秒:
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 快进:
video.currentTime = Math.min(video.duration, video.currentTime + 10); - 快退:
video.currentTime = Math.max(0, video.currentTime - 10); -
Math.min/max防止跳转超出视频范围(开头或结尾) - 可绑定到按钮或键盘快捷键(如 ← → 方向键)
支持拖拽进度条跳转
使用 <input type="range"> 模拟进度条是最常见方式:
立即学习“前端免费学习笔记(深入)”;
- 将 range 的
max设为video.duration,value绑定到video.currentTime - 监听
input事件实时更新时间:video.currentTime = range.value; - 监听
change事件(松开鼠标后)再恢复播放,避免拖拽过程中频繁触发播放 - 需配合
timeupdate事件反向同步 range 的 value,保持视觉一致
精确跳转到指定时间点(如章节、标记)
可通过按钮、链接或输入框触发精准跳转:
- 按钮示例:
<button onclick="jumpTo(125.5)">跳到 2:05.5</button> - JavaScript 函数:
function jumpTo(seconds) { video.currentTime = seconds; video.play(); } - 输入框方案:用户输入时间(支持 "mm:ss" 或秒数),解析后跳转(可用
parseInt或正则提取分秒) - 跳转后调用
play()可确保继续播放(尤其在暂停状态下)


















