HTML5视频播完跳转需用JavaScript监听ended事件，推荐addEventListener绑定并使用location.replace()；注意autoplay muted可避免拦截，多视频应通过data-next-page属性统一处理。
HTML5 视频播完后跳转页面，不能靠 video 标签的属性直接实现，必须用 JavaScript 监听 ended 事件再执行 window.location.href 或 location.replace()。
监听 video 的 ended 事件是最可靠方式
这是唯一标准、跨浏览器兼容的做法。注意：事件只在自然播放结束（非用户暂停/拖拽中断）时触发；若视频设置了 loop，ended 不会触发。
-
ended是原生事件，无需第三方库 - 必须等
video元素加载完成（loadeddata或canplay后绑定更稳妥），否则可能错过事件 - 推荐用
addEventListener，避免覆盖已存在的监听器
const video = document.getElementById('myVideo');
video.addEventListener('ended', () => {
window.location.href = 'https://example.com/thanks';
});
使用 onended 内联属性虽简单但不推荐
写在 HTML 里看似方便，但耦合严重、不利于维护，且无法动态修改跳转逻辑。
注意自动跳转可能被浏览器拦截或影响用户体验
现代浏览器（尤其 Chrome）对非用户手势触发的跳转越来越敏感，若视频是静音自动播放（autoplay muted），ended 后跳转大概率不会被拦截；但若有声音或需用户点击才播放，则跳转可能被限制。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对
window.location调用更严格，建议用location.replace()替代，避免返回时重新加载视频 - 跳转前可加简短延迟（如
setTimeout100ms），绕过部分 UA 的“非即时跳转”检测 - 务必测试真实设备，模拟器行为常有偏差
多个视频共用跳转逻辑？封装成函数并复用
当页面有多个 video，每个要跳不同页面时，别重复写 addEventListener，用 data-* 属性存目标 URL 更干净。
- 给每个
video加data-next-page属性 - 统一绑定事件，从事件源元素读取跳转地址
- 记得检查属性是否存在，避免
undefined导致跳转失败
document.querySelectorAll('video[data-next-page]').forEach(video => {
video.addEventListener('ended', function() {
const url = this.dataset.nextPage;
if (url) location.replace(url);
});
});
真正要注意的是：跳转时机是否符合业务意图——比如用户中途关闭标签页、切到后台、或视频因网络问题卡住未真正触发 ended，这些场景下都不会跳转。别假设它总能执行成功。
