HTML5play()播放结束回调方法

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《HTML5 play() 播放结束回调写法【步骤】》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

play() 方法无结束回调，其 Promise 在播放开始时解决而非结束；监听 ended 事件才是标准做法，需在 loadedmetadata 或 canplay 后绑定，避免漏触发。

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学习网公众号也会发布文章相关知识，快来关注吧！