HTML5play()播放结束监听方法

HTML5 的 `play()` 方法并不提供播放结束回调，其返回的 Promise 仅在播放成功启动时解决，而非结束时；真正监听播放完成应使用标准的 `ended` 事件——需在 `loadedmetadata` 或 `canplay` 等就绪状态后绑定，避免漏触发，同时推荐用 `addEventListener` 而非 `onended` 以支持灵活移除；相比不准确、低效且易受缓冲和同步问题干扰的 `timeupdate` + `duration` 轮询方案，`ended` 事件由浏览器原生保障，精准轻量、语义清晰，是跨浏览器兼容的最佳实践，仅需注意自动播放策略限制及少数 WebView 兜底场景即可。

HTML5 play() 方法本身没有结束回调

别被函数名误导了——play() 只是启动播放，它返回一个 Promise，但这个 Promise 解决（resolve）的时机是「播放成功开始」，不是「播完了」。想监听播放结束，得靠 ended 事件。

监听 ended 事件才是标准做法

所有现代浏览器都支持对 或 元素绑定 ended 事件，它在媒体自然播放到末尾时触发。

实操建议：

• 确保元素已加载元数据（loadedmetadata 或至少 canplay 后再监听，避免漏触发）
• 用 addEventListener('ended', handler)，不要用 onended，便于后续移除
• 如果元素可能被复用（比如循环播放、切换资源），记得在新 src 设置前先 removeEventListener

简单示例：

const video = document.querySelector('video');
video.addEventListener('ended', () => {
  console.log('播放结束了');
  // 这里写你的回调逻辑，比如跳转、提示、自动重播等
});

为什么不用 timeupdate + duration 判断？

有人试图轮询当前时间是否接近 duration，这既不精确也不必要：

• video.duration 在未加载完成时可能是 NaN 或 Inf
• timeupdate 触发频率不稳定，容易错过临界点
• 快进、网络缓冲、音视频不同步等情况会让时间比对失效
• ended 是浏览器原生事件，准确、轻量、语义明确

注意自动播放策略对 ended 的影响

如果视频是静音且自动播放（muted autoplay），ended 仍会正常触发；但如果因策略被阻止（比如有声音且无用户交互），play() 会抛错，ended 自然也不会来——所以务必检查 play() 的 Promise 是否 reject，并处理失败路径。

容易被忽略的一点：某些安卓 WebView 或旧版 iOS 中，ended 在全屏退出后可能延迟触发，或在资源释放过程中丢失。如需强保障，可结合 pause + currentTime === duration 做兜底判断，但仅限特定场景。

以上就是《HTML5play()播放结束监听方法》的详细内容，更多关于的资料请关注golang学习网公众号！