video标签的#t=参数仅首次加载生效,需配合preload="metadata"和loadedmetadata事件设置currentTime才能可靠跳转,跨域需CORS头,多格式source须为每个src单独添加#t=。

video标签用#t=参数指定起播时间,只对首次加载生效
直接在src里加#t=65.5能跳到第65.5秒开始播,但这个动作只发生在视频第一次加载时——刷新页面、或用JS改src后重新赋值才会触发。后续调用currentTime或再次设置src(不带#t=)都不会重读这个参数。
常见错误是以为src="demo.mp4#t=120"能“每次点击都从120秒开始”,结果发现第二次播放还是从头来。这不是bug,是规范行为。
- 整数更稳:Safari对
#t=65.5支持不一致,优先用#t=65或最多保留一位小数(#t=65.5) - 起止时间写法:
#t=65,120表示从65秒播到120秒自动暂停,但结束时间仅作提示,浏览器不强制截断 - 不能动态更新:想根据用户选择跳转?必须用JS的
currentTime,#t=纯静态
loadedmetadata事件里设currentTime才真正可靠
currentTime不是随时都能设的。如果在DOM ready后立刻写video.currentTime = 100,大概率失效——因为视频还没解析出时长、关键帧位置等元数据,currentTime会被忽略甚至抛InvalidStateError。
正确时机只有一个:loadedmetadata事件触发后。它代表浏览器已读完视频头信息,此时设currentTime才被接受。
立即学习“前端免费学习笔记(深入)”;
- 别用
onload或DOMContentLoaded:它们和视频元数据加载无关 - 移动端注意:自动播放受策略限制,
currentTime必须在用户手势(如click)后调用,否则可能被静音拦截 - 关键帧对齐:即使设了
currentTime = 65.5,实际播放会跳到最近的关键帧,可能偏差±2秒,编码格式影响大
preload="metadata"是currentTime生效的前提
preload决定浏览器加载视频的激进程度。preload="none"时,loadedmetadata可能迟迟不触发,甚至不触发;preload="auto"虽快但浪费流量,尤其对长视频。
精准起播只要元数据(时长、宽高、编码信息),所以preload="metadata"是平衡点——既保证loadedmetadata及时到达,又避免预加载全部视频数据。
- 显式声明:
<video preload="metadata" id="myVideo">,别依赖默认值(不同浏览器默认不同) - 跨域视频要CORS头:如果
src是跨域地址,服务器必须返回Access-Control-Allow-Origin: *,否则loadedmetadata静默失败,currentTime永远设不上 - 服务端直出场景下,
#t=更轻量;需要运行时逻辑(比如根据URL参数跳转),必须搭配loadedmetadata + currentTime
多格式source下#t=参数要写在每个src里
用<source>提供MP4/WebM多格式时,#t=不能只写在<video src="...">上——那个src属性在多<source>结构里会被忽略。必须把#t=分别加到每个<source>的src里。
否则浏览器选中WebM格式时,根本看不到#t=参数,起播时间就回到0秒。
- 正确写法:
<source src="video.mp4#t=65"><source src="video.webm#t=65"> - JS动态换源时,也要同步给新
src拼上#t=,否则切换后失效 - 如果用Blob URL或Object URL,
#t=无效,只能靠currentTime控制



















