video元素的currentTime属性是核心控制点,以秒为单位可读可写,但需检查readyState≥2、限制跳转范围,并注意iOS Safari等平台需用户手势触发首次播放才能可靠设置。

video 元素的 currentTime 属性是核心控制点
HTML5 元素本身不提供原生快进/后退按钮,所有进度跳转都依赖 JavaScript 操作 currentTime。这个属性以秒为单位,可读可写,直接赋值就能跳转——但要注意它不是实时同步的,尤其在缓冲不足或格式不支持时可能被忽略或延迟生效。
常见错误:直接写 video.currentTime += 10 却没检查边界,导致跳到负数或超出时长,引发静音、卡顿甚至 InvalidStateError。
- 务必先判断
video.duration是否已加载(video.readyState >= 2),否则duration可能为NaN - 跳转前建议限制范围:
Math.max(0, Math.min(video.duration, video.currentTime + offset)) - HLS 或 MSE 流媒体中,
currentTime跳转可能触发重新请求分片,延迟比本地 MP4 高得多
实现 15 秒快进 / 5 秒后退的可靠写法
用固定偏移量做快进后退最常用,但必须结合播放状态和加载状态判断。不能只靠 click 事件,要防连续点击、暂停中跳转失败等场景。
const video = document.querySelector('video');
const seekForward = () => {
if (video.readyState < 2) return;
const newPos = Math.min(video.duration, video.currentTime + 15);
video.currentTime = newPos;
};
const seekBackward = () => {
if (video.readyState < 2) return;
const newPos = Math.max(0, video.currentTime - 5);
video.currentTime = newPos;
};
document.getElementById('forward-btn').addEventListener('click', seekForward);
document.getElementById('backward-btn').addEventListener('click', seekBackward);
注意:video.readyState === 0 表示尚未加载元数据;=== 1 表示有元数据但无帧;≥ 2 才能安全读取 duration 和设置 currentTime。
立即学习“Java免费学习笔记(深入)”;
监听 timeupdate 时别直接修改 currentTime
很多教程在 timeupdate 回调里做自动跳过广告或章节,但这里改 currentTime 容易引发循环:跳转 → 触发 timeupdate → 再跳转 → 卡死或报错 InvalidStateError: The element has no supported sources。
- 避免在
timeupdate中无条件赋值currentTime - 加标志位控制,例如:
if (!isJumping) { isJumping = true; video.currentTime = target; setTimeout(() => isJumping = false, 100); } - 更稳妥的方式是监听
seeking和seeked事件,仅在seeked后再执行后续逻辑
移动端 iOS Safari 的特殊限制
iOS Safari 对 currentTime 设置极其保守:未播放过的视频、preload="none"、或用户未触发过播放手势(如点击)时,直接设 currentTime 会静默失败,且不抛错。
绕过方法只有两个:
- 确保首次操作是用户手势触发的
play()(哪怕只播 1ms 然后pause()),之后才能自由跳转 - 用
video.load()+video.play().catch(e => console.log(e))强制加载元数据,但部分 iOS 版本仍会拒绝非手势上下文的play()











