视频播放结束时通过监听ended事件弹出推荐弹窗，需绑定事件、控制显示逻辑并防重复触发，结合CSS/JS实现轻量弹窗及用户体验优化。
当视频播放结束时，利用 ended 事件监听并弹出推荐位弹窗，是提升用户停留和转化的常见做法。关键在于正确绑定事件、控制弹窗显示逻辑，并兼顾用户体验。
监听 video 标签的 ended 事件
HTML5 的 <video> 元素在自然播放完毕（非手动暂停或中断）时会触发 ended 事件。需确保视频设置了 controls 或通过 JS 控制播放，且未设置 loop 属性（否则不会触发 ended）。
- 在 JavaScript 中通过
addEventListener('ended', handler)绑定事件 - 推荐在
DOMContentLoaded或视频元素加载完成后绑定，避免获取不到 DOM - 若页面有多个视频，应为每个视频单独绑定，或用事件委托 + 判断
event.target
实现轻量级推荐弹窗（无需第三方库）
弹窗可用纯 HTML/CSS/JS 构建，保持结构简单、样式可控：
- 定义一个隐藏的
<div class="recommend-modal">，初始display: none或visibility: hidden - 在
ended回调中设置其style.display = 'block'并可选地添加淡入动画（如 CSS transition + opacity） - 弹窗内嵌推荐内容：可用静态 HTML，也可通过 AJAX 加载个性化推荐列表
- 务必提供关闭按钮（如 ×），点击后隐藏弹窗，建议同时解绑或忽略重复触发（见下一点）
防止重复触发与体验优化
用户可能拖拽进度条到末尾、或快速重播，导致 ended 多次触发；需合理控制弹窗行为：
立即学习“前端免费学习笔记（深入）”；
- 使用布尔标记（如
let modalShown = false），首次触发后置为true，后续忽略 - 若支持重播，可在用户点击“重新播放”按钮时重置标记（如监听自定义按钮的 click）
- 移动端注意弹窗遮罩层需覆盖整个视口，且添加
touch-action: none防止滚动穿透 - 可结合
pause()确保视频静止后再显示弹窗，避免视觉跳动
示例代码片段（精简可用）
HTML：
<video id="myVideo" src="demo.mp4" controls></video><br><div id="recommendModal" class="recommend-modal" style="display:none;"><br> <h3>精彩推荐</h3><br> <p>你可能还喜欢：《XXX》《YYY》</p><br> <button onclick="closeModal()">×</button><br></div>
JavaScript：
const video = document.getElementById('myVideo');<br>const modal = document.getElementById('recommendModal');<br>let hasEnded = false;<br><br>video.addEventListener('ended', () => {<br> if (!hasEnded) {<br> hasEnded = true;<br> modal.style.display = 'block';<br> }<br>});<br><br>function closeModal() {<br> modal.style.display = 'none';<br>} 
