视频暂停广告是交互反模式，技术上需绑定用户手势事件同步触发弹窗，关闭时重置video状态，并注意移动端兼容与合规风险。
直接在 video 元素上监听 pause 事件并弹出广告，浏览器会拦截、用户会反感、体验极差——这不是技术问题，而是交互反模式。真要实现，必须绕开自动弹窗限制，且明确区分“播放器内广告”和“网页层广告”两种逻辑。
video.pause 事件触发后不能直接 show() 或 showModal()
现代浏览器（Chrome ≥95、Edge ≥96、Firefox ≥90、Safari ≥16.4）对非用户手势触发的弹窗/模态框拦截极其严格。哪怕你写 video.addEventListener('pause', () => { dialog.showModal(); })，只要不是由 click、keydown 等真实用户激活事件同步调用，就会报错：Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document. 或静默失败。
更现实的问题是：用户点暂停，大概率是想思考、切屏、喝水——此时弹广告等于强行打断，跳出率飙升。平台如 Bilibili、YouTube 也只在播放开始前或自然暂停点（如片尾）做广告，而非监听 pause 后立刻弹。
真正能落地的广告插入点只有三个
必须绑定在用户可预测、不可跳过的主动交互之后：
立即学习“前端免费学习笔记（深入）”；
- 用户点击“继续观看”按钮（比如看完片头广告后的确认）
- 用户提交表单成功后（如登录完成、评论发布）
- 用户首次点击视频区域（
video.addEventListener('click', ...)），且该 click 是页面加载后第一次有效交互
这三点都满足“user activation”要求，dialog.showModal() 或 document.body.append(overlay) 才不会被拦。注意：不能用 setTimeout 延迟调用，必须在事件回调函数内同步执行。
广告弹窗关闭时必须重置 video 状态
这是最容易被忽略的细节。如果用户关闭广告弹窗后不手动处理，video 会继续在后台播放音频，且下次打开时从旧时间点继续播（比如暂停在 00:42，关掉广告再点播放，直接从 42 秒开始）。
正确做法是监听弹窗关闭动作，并重置：
dialog.addEventListener('close', () => {
video.pause();
video.currentTime = 0;
// 不要用 video.src = '' —— 会导致重新加载，卡顿
});
如果用自定义 div 弹窗，需手动绑定 Escape 键、遮罩层点击、关闭按钮三处事件，全部调用同一清理函数。
移动端要额外处理 touch-action 和滚动锁定
iOS Safari 和部分 Android WebView 对弹窗交互更敏感：
- 给弹窗容器加
style="touch-action: manipulation"，避免 300ms 延迟导致“点两下才关” - 弹出时设
document.body.style.overflow = 'hidden'，但必须先保存const savedY = window.scrollY，关闭后window.scrollTo(0, savedY)，否则用户回到原位置会丢失上下文 - Safari 15.x 及更早不支持
dialog::backdrop，遮罩层得用独立<div class="backdrop">，且z-index要比导航栏高至少 100
最后提醒一句：视频暂停广告在技术上可行，但合规性风险高（违反 GDPR/CCPA 的“未经明确同意不得展示广告”条款）、用户投诉多、平台审核严。优先考虑用播放器原生广告 SDK（如 IMA SDK）或平台提供的广告接入方案，别自己硬撸弹窗逻辑。
