应监听 video 元素的 ended 事件触发推荐内容，因其是浏览器原生保证的精确信号；需正确绑定/解绑监听器、处理 preload 和 autoplay 兼容性、动态插入推荐 DOM 并保障可访问性，同时兜底处理 pause、error 等异常场景。
监听 ended 事件触发推荐内容
视频播完后显示推荐，核心是捕获 ended 事件。不能依赖 timeupdate 或定时器去“猜”是否结束，因为快进、网络抖动或编码问题会导致时间判断不准。ended 是浏览器原生保证的精确信号，只要视频正常加载并播放到底，该事件必触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 给
<video></video>元素绑定addEventListener('ended', handler)，不要用内联onended属性——便于后续解绑和逻辑复用 - 确保视频资源支持
preload="metadata"或preload="auto"，否则部分浏览器可能不触发ended - 如果使用了
autoplay且被用户静音拦截，ended仍会触发，但需注意首次播放失败时不会进入播放流程
推荐区域 DOM 动态插入与样式控制
播放结束时，要让推荐内容“出现”，不是简单 display: block 切换——得考虑布局塌陷、焦点管理、可访问性（如屏幕阅读器）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提前在 HTML 中写好推荐容器，初始设为
aria-hidden="true"和hidden属性，比纯 CSS 控制更健壮 - 在
ended回调里移除hidden，同时设aria-hidden="false"，并调用focus()到推荐区首个可聚焦元素（如第一个推荐链接） - 避免用
innerHTML = '...'拼接推荐项；改用document.createElement+appendChild，防止 XSS（尤其推荐数据来自 API 时）
避免重复触发和状态冲突
用户可能在推荐区出现后手动刷新、回退、或点击其他视频，此时若未清理监听器或重置状态，会导致多次叠加推荐、或旧推荐残留。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次绑定
ended前先用video.removeEventListener('ended', handler)清理，尤其在单页应用中切换视频时 - 在推荐展示后，把
video的src设为空字符串或占位data:URL，防止用户点“重新播放”又触发一次ended - 如果用了
loop属性，ended不会触发——必须显式移除loop，否则推荐逻辑永远不执行
移动端自动播放兼容性带来的额外判断
iOS Safari 和 Android Chrome 对自动播放限制严格，即使加了 muted，也可能因用户未交互过而静音暂停。这时视频根本没播完，ended 就不会来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
pause事件配合video.duration === video.currentTime做兜底判断（仅当video.paused && !video.ended时才考虑） - 检查
video.networkState === HTMLMediaElement.NETWORK_IDLE和video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA，排除加载失败导致的假“结束” - 不要在
canplaythrough后立刻play()，应等用户手势（如点击按钮）后再调用，否则 iOS 上会静默失败且无错误提示
ended 变成一个“看似可靠实则脆弱”的信号。最易被忽略的是：没处理 error 或 abort 场景下用户以为播完了，其实卡在最后 1 秒；这时候推荐不该出现。 
