onpause 不是标准 html 属性，直接写无效；应使用 addeventlistener('pause') 监听暂停事件，并配合 adshown 状态和 video.ended 判断避免重复触发与结尾误弹。
onpause 不是标准 HTML 属性，直接写无效
HTML 的 <video></video> 元素根本没有 onpause 这个原生属性。你写 onpause="showAd()" 不会触发任何行为，浏览器会忽略它——这和 onclick 那种内置事件处理器不同，onpause 并未被规范定义。
真正能响应暂停动作的是 JavaScript 的 pause 事件，必须用 addEventListener 或赋值 onpause 属性（注意：这是元素对象的 JS 属性，不是 HTML 属性）。
- 错误写法：
<video onpause="showAd()"></video>→ 完全不生效 - 正确入口：监听
pause事件，且需确保视频元素已加载、可交互 - 注意时机：如果视频还没 ready，过早绑定事件可能漏触发
用 addEventListener('pause') 绑定暂停广告逻辑
推荐使用 addEventListener，它更可控、可移除、不易覆盖。关键点在于：广告弹出前最好加个防抖或状态判断，避免重复触发（比如用户反复点暂停/播放）。
const video = document.querySelector('video');
let adShown = false;
video.addEventListener('pause', () => {
if (!adShown && !video.ended) {
showAd(); // 你的广告展示函数
adShown = true;
}
});
// 播放恢复时可重置（按需）
video.addEventListener('play', () => {
adShown = false;
});
-
video.ended判断是否已播完，避免结尾暂停也弹广告 - 不要在
pause里直接调用模态框show()而不做限制——自动播放+暂停可能触发多次 - 移动端部分浏览器（如 iOS Safari）对自动弹窗拦截严格，
showAd()若含alert或非用户手势触发的modal可能被屏蔽
为什么不能用 onpause = function()？
虽然 video.onpause = function() {...} 在 JS 中能工作（因为它是元素对象的属性），但它有硬伤：
- 同一时间只能绑定一个处理函数，后续赋值会覆盖前一个
- 无法区分是用户点击暂停，还是脚本调用
video.pause()导致的暂停——而后者往往不该弹广告 - 与现代框架（React/Vue）生命周期易冲突，尤其组件卸载时难清理
如果你必须用内联方式（不推荐），至少写成：video.addEventListener('pause', handler, { once: true }) 控制触发次数。
广告弹出的实际限制比代码更关键
技术上能弹出，不等于能合规、可用。浏览器和平台对“暂停广告”有强约束：
- Chrome 和 Edge 对非用户手势触发的弹窗（包括
pause事件中调用window.open或document.write）直接拦截 - iOS Safari 禁止所有非
click触发的全屏广告，pause属于 passive 事件，大概率失败 - 广告若遮挡视频控制栏，可能违反 GDPR / CCPA 的“明确同意”要求，尤其首次暂停
- 实际业务中，更多采用“暂停后延时 1s 显示半透明浮层”，而非全屏弹窗——既绕过拦截，又降低跳出率
真正卡住的从来不是怎么写 pause 监听，而是广告展示时机、权限、用户预期之间的平衡。写完事件监听后，先在真机上测 iOS 和 Android Chrome，再看广告是否真的出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
