HTML5怎么设置视频播放结束跳转_播完后自动跳转到其他页面的方法【汇总】

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 里看似方便，但耦合严重、不利于维护，且无法动态修改跳转逻辑。

• 如果必须用，确保函数定义在全局作用域（如 window.jumpAfterEnd = function(){...}）
• 内联写法无法传参，跳转地址只能硬编码或依赖全局变量
• 调试困难，错误堆栈不清晰

注意自动跳转可能被浏览器拦截或影响用户体验

现代浏览器（尤其 Chrome）对非用户手势触发的跳转越来越敏感，若视频是静音自动播放（autoplay muted），ended 后跳转大概率不会被拦截；但若有声音或需用户点击才播放，则跳转可能被限制。

立即学习“前端免费学习笔记（深入）”；

• 移动端 Safari 对 window.location 调用更严格，建议用 location.replace() 替代，避免返回时重新加载视频
• 跳转前可加简短延迟（如 setTimeout 100ms），绕过部分 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，这些场景下都不会跳转。别假设它总能执行成功。