HTML元素onended属性怎么在视频播放结束时自动跳转-html教程-PHP中文网

onended触发跳转常失效，因现代浏览器拦截非用户手势触发的导航；可行方案是绑定用户手势权限（如play事件标记）或改用dom替换避开跳转限制。

html元素onended属性怎么在视频播放结束时自动跳转

onended 属性本身不能直接触发跨域跳转，现代浏览器（尤其是 Chrome 120+）会拦截非用户手势触发的 window.location.href 赋值，即使视频是自动播放且静音，也存在被限制的风险。

onended 触发跳转为什么经常失效

根本原因是浏览器的安全策略升级：只要跳转行为不是由明确的用户操作（如 click、touchstart）同步触发，onended 这类媒体事件发起的导航大概率被阻止，并静默失败（控制台可能无报错，但页面不跳）。

即使加了 autoplay muted，Chrome / Edge 在 2025 年后对 onended 中的跳转越来越严格
如果视频需用户点击才开始播放，onended 后的跳转几乎必然被拦截
onended 是异步事件，与用户手势的“激活期”已断开，浏览器不认为它具备导航权限

能用的替代方案：用 play() + 用户手势延续权限

核心思路是：把跳转逻辑“挂”在一次有效的用户交互上下文中，而不是等 onended 独立执行。

监听 video 的 play 事件，在首次播放时记录一个标记（如 userPlayed = true）
在 onended 中检查该标记，若为 true，再调用 window.location.href
更稳妥的做法：在用户点击播放按钮时，立即调用 video.play() 并同时注册一个 Promise 链，把跳转作为后续可信任操作

示例（轻量级）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

const video = document.getElementById('myVideo');
let userInitiated = false;

video.addEventListener('play', () => {
  userInitiated = true;
});

video.addEventListener('ended', () => {
  if (userInitiated) {
    window.location.href = 'result.html';
  }
});