ended事件触发推荐位需在loadeddata/canplay后用addEventListener绑定，结合currentTime与duration校验自然结束，推荐容器应绝对定位、防抖展示并支持关闭；兼容性不足时可用timeupdate轮询兜底。
视频播放结束（ended事件）触发推荐位，核心是监听事件后及时、准确地展示相关内容，同时兼顾用户体验与性能。
监听ended事件的正确写法
需确保在<video></video>元素加载完成（loadeddata或canplay之后）再绑定事件，避免因元素未就绪导致监听失效：
- 使用
addEventListener('ended', handler)而非onended属性，便于解绑和复用 - 若视频支持重播（
loop=false且未手动调用play()），ended只触发一次 - 注意：
ended在视频自然播放至末尾时触发，不包括用户拖拽到末尾、静音跳过或网络中断等情况
触发推荐位前的关键判断
不是所有ended都适合立即推推荐，需结合业务逻辑过滤：
- 检查
video.currentTime === video.duration，排除因精度误差或媒体分段导致的误触发 - 排除用户主动暂停后手动拖到结尾、或播放中途刷新页面又恢复播放等异常路径
- 可结合
playbackRate和paused状态，确认是否为“完整、非加速、非中断”的自然结束
推荐位渲染与交互要点
触发后推荐内容应快速响应，同时避免干扰用户：
立即学习“前端免费学习笔记（深入）”；
- 推荐容器建议用
position: absolute或fixed覆盖在视频区域右下/底部，不引起页面重排 - 首次触发后可设防抖（如3秒内不再重复展示），防止用户反复点击“重播”造成频繁弹出
- 推荐项需包含清晰的关闭按钮（×）或点击遮罩层收起，支持键盘
ESC关闭，满足无障碍要求
兼容性与降级处理
部分老浏览器或特定环境（如iOS微信内置浏览器）对ended支持不稳定：
- 可配合
timeupdate轮询检测：if (Math.abs(video.currentTime - video.duration) - 对
MediaError或stalled等异常状态做兜底，避免黑屏无反馈 - 服务端可记录播放完成率，用于校验前端触发是否合理，辅助优化推荐策略
