HTML5视频需在loadedmetadata事件后设currentTime属性(单位秒)才能精准跳转,URL的#t=参数可静态指定起播时间但仅首次加载有效,preload应设为metadata,跨域视频须配置CORS头否则静默失败。

使用 currentTime 属性控制起始播放时间
HTML5 元素原生支持从指定时间点开始播放,核心是设置 currentTime 属性。这个属性单位为秒(浮点数),代表视频当前播放位置。它必须在视频元数据加载完成(loadedmetadata 事件触发后)才能安全设置,否则可能被忽略或抛错。
常见错误是直接在 onload 或 DOM 加载后立刻赋值,但此时视频尚未解析时长和关键帧信息,currentTime 设置无效。
- 推荐在
loadedmetadata事件回调中设置:const video = document.getElementById('myVideo'); video.addEventListener('loadedmetadata', () => { video.currentTime = 65.5; // 从第 65.5 秒开始 }); - 若需兼容自动播放策略(如移动端),应在用户手势触发后设置,例如绑定到按钮点击:
playBtn.addEventListener('click', () => { video.currentTime = 120; video.play(); }); - 注意:某些编码格式(如无关键帧的 GOP 起始位置)可能导致跳转不精确,实际播放会就近对齐到最近的关键帧
通过 URL 参数传递起始时间(#t=)
HTML5 规范支持在视频 URL 后添加 #t= 片段标识符来声明起始时间,浏览器会在加载时自动跳转。语法支持两种格式:#t=65.5(仅开始时间)或 #t=65.5,120(开始+结束时间)。
这个方法无需 JS,适合静态页面或服务端直出场景,但有明显限制:
- 只在首次加载视频时生效;刷新页面或重新设置
src后才重新解析 - 部分浏览器(如 Safari 某些版本)对浮点数支持不稳定,建议用整数或小数位 ≤ 1 位
- 不能动态修改,无法响应运行时逻辑(比如根据用户行为计算时间点)
- 示例:
preload 属性影响 currentTime 设置时机
preload 决定了浏览器加载视频的积极程度,间接影响 currentTime 是否能及时生效。默认值 metadata 仅加载元数据(含时长、尺寸),已足够支持 currentTime 设置;而 none 可能导致 loadedmetadata 延迟甚至不触发。
- 确保
preload不为none,尤其在需要精确起播的场景下: -
preload="auto"会预加载更多数据,可能加快跳转响应,但增加带宽消耗,移动端慎用 - 即使设置了
preload="metadata",仍需监听loadedmetadata,不能假设 DOM ready 后就绪
跨域视频下 currentTime 设置失败的静默问题
当视频资源位于不同源(CORS)且响应头未包含 Access-Control-Allow-Origin 时,浏览器出于安全限制,会禁止读取视频元数据(包括时长),导致 currentTime 设置无效,且通常不报错——只是静默失败。
验证方式:检查控制台是否出现类似 Unable to get video metadata: No 'Access-Control-Allow-Origin' header 的警告;或打印 video.duration,若为 NaN 即表示元数据不可用。
- 服务端必须返回正确的 CORS 头,至少包含:
Access-Control-Allow-Origin: *
(或具体域名) -
前端可加兜底判断:
if (isNaN(video.duration)) { console.warn('Video metadata not available — currentTime may not work'); } - CDN 或对象存储(如 S3、OSS)需单独配置 CORS 规则,这点常被忽略
loadedmetadata 的等待逻辑——没这两个,其他写法都可能白忙。











