currentTime是HTML5音视频元素的可读写属性,用于获取或设置以秒为单位的当前播放位置,支持毫秒级跳转,但精度受浏览器、编解码器及媒体文件限制;需在loadedmetadata事件后操作,跳转后可能需手动调用play(),并建议监听seeking/seeked事件校验。

currentTime 是 HTML5 <video> 和 <audio> 元素的可读写属性,用于获取或设置媒体当前播放位置(单位:秒,支持小数)。它能实现毫秒级精度跳转,但实际精度受浏览器、编解码器和媒体文件本身限制。
基础用法:直接读写 currentTime
直接赋值即可跳转到指定时间点:
- 设置为
0表示跳转到开头; - 设置为
12.345表示跳转到第 12 秒 345 毫秒处; - 读取该属性可获知当前精确播放位置(如
video.currentTime)。
确保跳转生效的关键前提
不是所有赋值都能立即生效。需注意以下几点:
-
媒体必须已加载元数据(metadata):在
loadedmetadata事件后才可安全操作; - 部分格式/浏览器对非关键帧跳转有延迟:视频会自动定位到最近的关键帧(I帧),再解码播放,导致视觉上“不精准”;
-
设置后需手动调用
play()(如果媒体处于暂停状态),否则不会自动继续播放。
提升跳转准确性的实用技巧
针对常见不准问题,可采取这些措施:
立即学习“前端免费学习笔记(深入)”;
- 监听
seeking和seeked事件:前者表示跳转开始,后者表示跳转完成,可用于反馈或校验; - 使用
preload="auto"提前加载更多片段,减少 seek 时缓冲等待; - 对高精度需求场景(如字幕同步、剪辑预览),优先选用 MP4(H.264 + AAC)并确保关键帧间隔较短(如 2 秒内);
- 跳转后检查实际位置:
console.log("实际跳到", video.currentTime),便于调试偏差。
简单示例:点击按钮跳转到 30 秒
HTML:
<video id="myVideo" controls> <source src="demo.mp4" type="video/mp4"> </video> <button onclick="jumpTo(30)">跳到 30 秒</button>
JavaScript:
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
console.log('时长:', video.duration); // 确保能读取 duration
});
function jumpTo(time) {
if (video.readyState >= 2) { // HAVE_ENOUGH_DATA 或更高
video.currentTime = time;
} else {
video.addEventListener('loadeddata', () => {
video.currentTime = time;
}, { once: true });
}
}



















