HTML5 play函数设置起始时间方法

HTML5视频从指定时间点播放看似简单，实则暗藏多重浏览器兼容性陷阱：必须严格遵循“用户手势触发→等待loadedmetadata事件→设置currentTime→调用play()并处理其Promise拒绝”的完整链路，否则在iOS Safari等主流移动端浏览器中极易遭遇静音拦截、跳转失败或从头播放；尤其要注意currentTime不能滞后于play()调用、需确保缓冲区覆盖目标时间点，且iOS Safari要求首次定位必须紧贴用户交互、甚至建议在play成功后再二次设置以提升可靠性——忽略任一环节，“精准起播”都可能变成无法复现的玄学问题。

play() 调用前必须先设置 currentTime

HTML5 play() 本身不接受起始时间参数，它只是触发播放。想从指定位置开始，得在调用 play() 前手动设置 currentTime 属性。

常见错误是先 play() 再设 currentTime，此时浏览器可能已从 0 秒开始解码和渲染，再改时间会触发重新加载或跳转延迟，甚至被部分浏览器（如 iOS Safari）静音策略拦截导致失败。

• 正确顺序：video.currentTime = 12.5; → video.play();
• currentTime 单位是秒，支持小数（如 3.75）
• 设置后立即读取 currentTime 可能仍为 0，因为尚未加载到该位置；应监听 seeked 事件确认就位

为什么有时设了 currentTime 还是从头播？

本质是媒体资源未缓冲到目标时间点，或浏览器拒绝非用户手势触发的自动播放 + 定位组合。

典型场景包括：页面加载完成就自动定位播放、定时器里调用、AJAX 回调中执行。这些都属于“非直接用户交互触发”，Chrome 和 Safari 会静默阻止。

• 必须由用户真实操作（如 click、touchend）的回调中同步执行 currentTime + play()
• 视频需至少加载了目标时间附近的片段（可通过 video.buffered.end(0) > targetTime 判断）
• 若 readyState < 4（即未达到 HAVE_ENOUGH_DATA），设置 currentTime 会无效或抛错

play() 返回 Promise，要处理拒绝情况

现代浏览器中 play() 返回 Promise，失败时不会抛异常，而是 reject —— 比如因策略限制无法播放，或 currentTime 设置后还未就绪就调了 play()。

忽略这个 Promise 拒绝会导致静默失败，界面卡住无反馈。

video.currentTime = 30;
video.play().catch(err => {
  console.warn("播放失败:", err.name); // 常见 err.name: "NotAllowedError", "AbortError"
  // 可降级提示用户点击按钮重试
});

移动端特别注意：iOS Safari 的 currentTime 行为差异

iOS Safari 对 currentTime 设置极其保守：只有在 play() 成功后（即 Promise resolve 后），才允许再次设置 currentTime 并保证生效；首次设置必须紧贴用户手势，且不能早于 loadedmetadata 事件。

• 务必监听 loadedmetadata 后再设置初始 currentTime
• 避免在 canplay 或 canplaythrough 中过早设置，iOS 可能忽略
• 如果需要精确跳转，建议在 play() 的 Promise resolve 回调里再设一次 currentTime（即使和之前一样），iOS 更可靠

实际中最容易被忽略的是：你以为设了 currentTime 就万事大吉，但没等元数据加载完、没走用户手势上下文、也没处理 Promise 拒绝 —— 这三者任意一个缺失，都会让“从某秒开始播”变成玄学。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5 play函数设置起始时间方法》文章吧，也可关注golang学习网公众号了解相关技术文章。