HTML5 中 video 播放器怎么通过 currentTime 调整播放进度-H5教程-PHP中文网

currenttime是html5视频进度控制核心属性，单位秒且可读写，但需readystate≥2且duration有效才生效；快进/快退需math.min/max防越界；跳转需结合loadedmetadata监听、timeupdate同步及range双向绑定。

html5 中 video 播放器怎么通过 currenttime 调整播放进度

currentTime 是 HTML5 <video></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 防止越界（超开头或结尾），避免部分浏览器跳回起点。

⚠️ 注意：仅改 currentTime 不会自动恢复播放。如果视频处于暂停状态，时间变了但画面不动。是否调用 video.play()，取决于交互逻辑：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

想“点完就播”：加 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 HAVE_NOTHING 或 HAVE_METADATA）→ 加监听或延迟
networkState === 0（NETWORK_EMPTY）→ 视频 src 为空或未开始加载
设置了超出范围的时间（如 currentTime = -5 或 > duration）→ 浏览器行为不一，建议始终用 Math.max(0, Math.min(duration, time)) 包裹
视频暂停状态下修改 currentTime 后没反应 → 时间其实已改，只是没播放；手动 play() 或提示用户点击播放

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！