currentTime是HTML5视频进度控制核心属性，单位秒且可读写，但需readyState≥2且duration有效才生效；快进/快退需Math.min/max防越界；跳转需结合loadedmetadata监听、timeupdate同步及range双向绑定。
currentTime 是 HTML5 <video> 元素最核心的进度控制属性，单位是秒（浮点数），可读可写。但它不是“设了就跳”，必须满足前提条件才能生效。
关键前提：视频得“认得清自己”currentTime 要能可靠设置，视频至少得加载完元数据（比如时长、宽高、编码信息）。此时 video.readyState ≥ 2（即 HAVE_ENOUGH_DATA 或更高），且 video.duration 不为 NaN 或 0。否则直接赋值会被忽略，甚至抛 InvalidStateError。
常见做法是监听 loadedmetadata 事件：
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
console.log('总时长:', video.duration); // 此时 duration 才可信
video.currentTime = 30; // 安全设置：跳到第30秒
});快进/快退：在当前基础上增减
适合按钮点击或键盘操作（如 ← → 方向键）：
立即学习“前端免费学习笔记（深入）”；
-
快进10秒：
video.currentTime = Math.min(video.duration, video.currentTime + 10);
-
快退10秒：
video.currentTime = Math.max(0, video.currentTime - 10);
✅ Math.min/max 防止越界（超开头或结尾），避免部分浏览器跳回起点。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
⚠️ 注意：仅改 currentTime 不会自动恢复播放。如果视频处于暂停状态，时间变了但画面不动。是否调用 video.play()，取决于交互逻辑：
- 想“点完就播”：加
video.play().catch(e => console.warn('自动播放被阻止'))（需用户手势触发才有效）； - 更稳妥：只改时间，由用户手动点播放按钮。
精准跳转到指定时间点
支持多种触发方式：
-
按钮跳转（如章节按钮）：
<button onclick="jumpTo(125.5)">第二章：2:05.5</button>
function jumpTo(seconds) { if (video.readyState >= 2) { video.currentTime = seconds; video.play(); // 可选：需要时再加 } else { video.addEventListener('loadeddata', () => { video.currentTime = seconds; }, { once: true }); } } 输入框输入时间（支持
mm:ss或纯秒数）：
解析示例："2:05.5"→125.5秒；然后同上设置currentTime。
进度条拖拽同步（自定义 range 控件）
用 <input type="range"> 做可视化进度条时，需双向绑定：
-
视频播放 → 更新滑块位置（监听
timeupdate）：video.addEventListener('timeupdate', () => { if (video.duration && !isNaN(video.duration)) { const percent = (video.currentTime / video.duration) * 100; range.value = percent; } }); -
用户拖动 → 更新播放时间（监听
change或input）：range.addEventListener('change', () => { video.currentTime = (range.value / 100) * video.duration; });
? 小技巧：input 事件实时响应拖拽，但可能太频繁；change 仅在松手后触发，更稳定。若需拖拽中预览，可用 input + video.pause() 临时暂停，松手后再 play()。
常见失效原因排查
- 视频还没加载元数据（
duration是NaN）→ 等loadedmetadata再操作 -
readyState< 2（如还卡在HAVE_NOTHING或HAVE_METADATA）→ 加监听或延迟 -
networkState === 0（NETWORK_EMPTY）→ 视频 src 为空或未开始加载 - 设置了超出范围的时间（如
currentTime = -5或> duration）→ 浏览器行为不一，建议始终用Math.max(0, Math.min(duration, time))包裹 - 视频暂停状态下修改
currentTime后没反应 → 时间其实已改，只是没播放；手动play()或提示用户点击播放
不复杂但容易忽略。
