视频播放结束时需可靠捕获ended事件以执行跳转、换源等操作，但仅自然播完触发；手动暂停、网络中断或#t=片段语法不触发，此时需监听timeupdate手动派发ended事件。
视频播放结束时自动执行后续操作，核心是可靠捕获 ended 事件，并在回调中完成你的逻辑——比如跳转、换源、上报或提示。但要注意，它只在自然播完时触发，手动暂停、网络中断或使用 #t= 片段语法都不会激活它。
监听 ended 事件的基本写法
这是最直接的方式，适用于大多数标准播放场景：
- 确保
元素已加载完成（推荐在DOMContentLoaded或loadeddata后绑定） - 用
addEventListener('ended', handler)绑定，比内联onended更灵活、易维护 - handler 函数里可执行任意 JS 操作，无需额外判断播放状态
处理自动跳转的兼容性问题
直接在 ended 回调里调用 window.location.href 可能被 Chrome 或 Safari 拦截，尤其在无用户交互启动的播放中：
- 若视频是静音自动播放（
autoplay muted），跳转通常允许 - 否则建议加
setTimeout延迟 100ms 再跳，绕过部分浏览器的“非即时导航”限制 - 移动端优先用
location.replace()，避免返回时重复加载视频 - 多个视频对应不同跳转页？用
data-next-url属性存地址，统一读取
模拟 ended 行为：当用了 #t= 片段语法时
src="demo.mp4#t=0,30" 这类写法虽能强制只播前 30 秒，但不会触发 ended。此时需手动监控时间点：
- 监听
timeupdate事件（每 200–250ms 触发一次） - 在回调中检查
video.currentTime >= 30，满足则调用video.pause() - 再用
video.dispatchEvent(new Event('ended'))主动派发事件，保持逻辑统一 - 注意避免重复触发，可加标志位或用
once: true配合重绑
配合循环与重播的常见组合
有些场景需要“播完不跳，而是重播”或“播完切下一集”，这时 ended 是统一入口：
- 纯循环：设
video.loop = true，无需监听ended；若需自定义重播逻辑（如重置字幕），再监听并手动currentTime = 0; play() - 顺序播放多集：在
ended回调中更新video.src，接着调用load()和play() - 防误触：切换前检查索引是否越界，或加 loading 状态防止快速连点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
