HTML5视频播放结束监听技巧

一分耕耘，一分收获！既然都打开这篇《HTML5视频播放结束监听方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

ended事件仅在视频自然播放至末尾且未启用loop时触发；需在loadedmetadata后绑定监听，避免因时机过早或源加载失败导致失效。

video 元素的 ended 事件到底什么时候触发

它只在视频自然播放到末尾（即播放指针到达 duration 且没有循环）时触发，不是暂停、出错、用户拖拽跳过结尾或网络中断时触发。如果设置了 loop="true"，ended 永远不会触发——浏览器会直接从头重播，不经过“结束”状态。

监听 ended 事件的正确写法（含兼容性注意）

必须确保 video 元素已加载完成、DOM 已就绪，否则绑定无效；现代浏览器支持直接用 addEventListener，但 IE9–10 需用 attachEvent（已基本可忽略）。关键点是：不要等 load 或 canplay，而应至少等到 loadedmetadata 后再绑定，否则部分浏览器（如 Safari）可能漏掉首次结束事件。

const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
  video.addEventListener('ended', () => {
    console.log('视频已自然播放完毕');
    // 这里写你的逻辑，比如显示按钮、跳转、上报埋点
  });
});

常见失效原因和避坑清单

很多情况下写了监听却没反应，实际是以下某个环节断了：

• video 标签缺少 src 或源未加载成功（检查 Network 面板是否有 404 或 CORS 错误）
• 绑定时机太早：脚本在 标签前执行，querySelector 返回 null
• 使用了 onended = function() {...} 但后续又被其他代码覆盖（单次赋值，不可叠加）
• 视频被 JS 调用 pause() 后手动设置 currentTime = video.duration，这不会触发 ended —— 必须靠真实播放流程走到终点
• 移动端 iOS Safari 对自动播放策略严格，若视频无用户手势触发（如点击），可能根本没开始播，自然也不会结束

需要「播放完自动做某事」？别只靠 ended

如果目标是“确保用户看到结尾后执行动作”，仅监听 ended 不够鲁棒。建议组合判断：

video.addEventListener('timeupdate', () => {
  if (video.ended || (video.currentTime >= video.duration - 0.1 && !video.paused && !video.seeking)) {
    // 视频极大概率已结束（加 0.1s 容差，避免浮点误差）
    handleVideoComplete();
  }
});

这种兜底方式能覆盖 ended 未触发的边缘情况，比如某些编码异常导致元数据不准，或浏览器 bug。但注意频繁触发 timeupdate 的开销，上面示例里没做节流，真实项目中建议加简单防抖。

终于介绍完啦！小伙伴们，这篇关于《HTML5视频播放结束监听技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！