推荐用dialog+video组合实现全屏弹窗：dialog需为body直接子元素，视频设width:100%;height:100vh;并静音以支持自动播放；点击按钮时先play()再requestfullscreen()，关闭时监听close事件暂停并重置currenttime。
点击按钮触发全屏视频弹窗，核心是用 dialog + video 组合
现代浏览器（Chrome 97+、Firefox 98+、Safari 15.4+）原生支持 dialog 元素，它比手写 div 遮罩层更语义化、键盘可访问、自动管理焦点。别再用 jQuery 插件或自己写 z-index 层叠逻辑了——dialog 默认模态、自带 showModal() 方法，且能自然响应 Escape 关闭。
关键点：dialog 必须是 body 直接子元素，否则可能被父容器的 overflow: hidden 或 transform 截断；视频需设 width: 100%; height: 100vh; 才真正“全屏”（注意不是 100%，否则高度受限于父容器）。
-
dialog不支持position: fixed，所以不能靠 CSS 模拟全屏，必须用 JS 控制显示/隐藏 - 视频源建议用
src属性而非source子标签，避免在dialog动态插入时触发两次加载 - 移动端 Safari 对
dialog的backdrop支持较弱，需加dialog::backdrop { background: rgba(0,0,0,.8); }兜底
按钮点击后如何让视频自动播放并进入全屏？
自动播放受浏览器策略限制：只有用户手势（click）触发的 play() 才被允许，且视频必须设 muted（静音）。否则会抛出 NotAllowedError 错误，play() 被拒绝。
全屏 API 不能直接作用于 video 元素（部分旧浏览器不支持），稳妥做法是调用 dialog 的 showModal() 后，再对 video 调用 requestFullscreen() ——但注意：iOS Safari 不支持 requestFullscreen() 在非 user-gesture 上下文中执行，所以必须把全屏请求放在 click 回调里，且紧挨着 play()。
- 务必检查
video.play().catch(e => console.log(e))，捕获静音缺失导致的失败 -
requestFullscreen()返回 Promise，需.then()处理成功，.catch()处理权限拒绝（如用户禁用了全屏） - 不要用
webkitEnterFullscreen()等私有方法，iOS 15+ 已统一支持标准 API
关闭弹窗时如何正确暂停并重置视频？
用户点关闭按钮、按 Escape 或点背景遮罩，都会触发 dialog 的 close 事件。此时若不手动暂停视频，它会在后台继续播放（尤其音频），且下次打开时可能卡在旧时间点。
更隐蔽的问题：重复打开同一 dialog，video 元素不会重载，currentTime 保持上次位置。除非显式重置，否则用户看到的是“从中间开始播”的错觉。
- 监听
dialog.addEventListener('close', () => { video.pause(); video.currentTime = 0; }) - 不要用
dialog.close()后立刻video.src = ''，这会导致下次播放前重新加载，体验卡顿 - 如果视频是流媒体（如 HLS），重置
currentTime可能无效，应改用load()+play()组合，但需再次处理静音和自动播放限制
兼容性兜底：老浏览器没 dialog 怎么办？
IE 和旧版 Edge 完全不支持 dialog，也不能靠 polyfill 完全模拟其模态行为（尤其是焦点管理）。最简方案是降级为 div + 手动控制 display 和 aria-modal 属性，同时用 document.body.style.overflow = 'hidden' 锁定滚动。
重点不是“看起来像”，而是“行为一致”：ESC 关闭、点击遮罩关闭、Tab 键只在弹窗内循环。这些靠 dialog 自动完成，手动实现容易漏掉 focusin 事件监听或 inert 属性设置。
- 检测支持性用
typeof HTMLDialogElement !== 'undefined'，别用'open' in document.createElement('dialog')（返回 false 但实际可用） - 降级方案中，视频全屏仍可用
video.webkitEnterFullscreen()（iOS）或video.requestFullscreen()（Android Chrome），但需单独判断平台 - 别为兼容 IE 而放弃现代 API —— 现代项目应明确要求浏览器版本，而不是用复杂 polyfill 拖慢所有用户
video 的静音、自动播放、全屏请求三者时机卡准，以及是否在 close 事件里干净地重置状态。最容易被忽略的是：移动端 Safari 对 dialog 的 backdrop 渲染异常，以及反复打开时 currentTime 不归零导致的播放错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
