HTML5视频需在loadedmetadata事件后设currentTime属性（单位秒）才能精准跳转，URL的#t=参数可静态指定起播时间但仅首次加载有效，preload应设为metadata，跨域视频须配置CORS头否则静默失败。
使用 currentTime 属性控制起始播放时间
HTML5 <video></video> 元素原生支持从指定时间点开始播放，核心是设置 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 位
- 不能动态修改，无法响应运行时逻辑（比如根据用户行为计算时间点）
- 示例：
<video src="demo.mp4#t=65.5" controls></video>
preload 属性影响 currentTime 设置时机
preload 决定了浏览器加载视频的积极程度，间接影响 currentTime 是否能及时生效。默认值 metadata 仅加载元数据（含时长、尺寸），已足够支持 currentTime 设置；而 none 可能导致 loadedmetadata 延迟甚至不触发。
- 确保
preload不为none，尤其在需要精确起播的场景下：<video preload="metadata" id="myVideo"></video>
-
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 的等待逻辑——没这两个，其他写法都可能白忙。 
