ended事件触发推荐位需在loadeddata/canplay后用addEventListener绑定，结合currentTime与duration校验自然结束，推荐容器应绝对定位、防抖展示并支持关闭；兼容性不足时可用timeupdate轮询兜底。

视频播放结束（ended事件）触发推荐位，核心是监听事件后及时、准确地展示相关内容，同时兼顾用户体验与性能。

监听ended事件的正确写法

需确保在元素加载完成（loadeddata或canplay之后）再绑定事件，避免因元素未就绪导致监听失效：

• 使用addEventListener('ended', handler)而非onended属性，便于解绑和复用
• 若视频支持重播（loop=false且未手动调用play()），ended只触发一次
• 注意：ended在视频自然播放至末尾时触发，不包括用户拖拽到末尾、静音跳过或网络中断等情况

触发推荐位前的关键判断

不是所有ended都适合立即推推荐，需结合业务逻辑过滤：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 检查video.currentTime === video.duration，排除因精度误差或媒体分段导致的误触发
• 排除用户主动暂停后手动拖到结尾、或播放中途刷新页面又恢复播放等异常路径
• 可结合playbackRate和paused状态，确认是否为“完整、非加速、非中断”的自然结束

推荐位渲染与交互要点

触发后推荐内容应快速响应，同时避免干扰用户：

• 推荐容器建议用position: absolute或fixed覆盖在视频区域右下/底部，不引起页面重排
• 首次触发后可设防抖（如3秒内不再重复展示），防止用户反复点击“重播”造成频繁弹出
• 推荐项需包含清晰的关闭按钮（×）或点击遮罩层收起，支持键盘ESC关闭，满足无障碍要求

兼容性与降级处理

部分老浏览器或特定环境（如iOS微信内置浏览器）对ended支持不稳定：

• 可配合timeupdate轮询检测：if (Math.abs(video.currentTime - video.duration)
• 对MediaError或stalled等异常状态做兜底，避免黑屏无反馈
• 服务端可记录播放完成率，用于校验前端触发是否合理，辅助优化推荐策略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！