currentTime赋值前必须检查video.readyState≥2,否则duration为NaN导致跳转失败;需用Math.max(0, Math.min(video.duration, video.currentTime+offset))限制边界,防止负值或超时长引发错误。

currentTime 是唯一可靠的方式,但直接加减秒数会出错——必须先检查加载状态、再限制边界、最后赋值。
为什么点击快进按钮没反应或跳到开头?
最常见原因是 video.readyState 不足:视频元数据(如时长)还没加载完成,video.duration 仍是 NaN,导致计算失败或跳转无效。
- 只有
video.readyState >= 2才能安全读取duration和写入currentTime -
readyState === 0:尚未加载任何内容;=== 1:只加载了元数据但无可用帧;≥ 2才表示可播放且时长已知 - 不要依赖
loadedmetadata事件后立刻操作——该事件可能早于duration真正就绪,稳妥做法是每次点击前都检查readyState
快进/快退按钮的 JS 实现要点
核心是用 Math.max(0, Math.min(video.duration, video.currentTime + offset)) 做兜底,避免负值或超时长跳转引发卡顿、静音甚至 InvalidStateError。
- 快退 5 秒:
video.currentTime = Math.max(0, video.currentTime - 5) - 快进 15 秒:
video.currentTime = Math.min(video.duration, video.currentTime + 15) - 务必在赋值前判断:
if (video.readyState - 不要在
timeupdate回调里无条件改currentTime,否则可能触发循环跳转或报错
移动端 Safari 的特殊限制
iOS Safari 要求首次播放必须由用户手势触发,之后才能可靠设置 currentTime。如果视频一开始是静音自动播放或未交互就调用跳转,很可能失败。
立即学习“前端免费学习笔记(深入)”;
- 确保第一次
play()是用户点击按钮触发的(哪怕只是点一下播放键) - 后续的快进/快退操作才具备上下文权限
- 不能靠
autoplay+muted绕过——部分 iOS 版本仍会拒绝非手势触发的currentTime修改
真正容易被忽略的是 readyState 判断和 iOS 手势链——这两个点不处理,功能在部分设备上就是“看起来写了,但实际不工作”。



















