HTML5沉浸式全屏播放需调用requestFullscreen API并监听fullscreenchange事件，配合兼容处理、用户手势触发、playsinline与muted属性（移动端），退出用document.exitFullscreen()，确保状态可控、视觉连贯。
HTML5 中实现网页视频的沉浸式全屏播放，关键不是“单纯放大”，而是让用户点击即进、退出自然、状态可控、视觉不跳变。核心依赖原生 requestFullscreen API，配合状态监听、兼容处理和样式协同，才能真正达成沉浸感。
用 requestFullscreen 触发视频元素级全屏
这是最标准的沉浸式路径：只让视频区域铺满屏幕，保留浏览器地址栏、工具栏可见（部分浏览器如 Safari 会隐藏），页面其他内容被遮盖但不干扰。必须由用户手势触发（如 click），不能自动调用。
- 获取 video 元素后，直接调用
element.requestFullscreen() - 为兼容旧版浏览器，依次尝试
webkitRequestFullscreen（Chrome/Safari）、mozRequestFullScreen（Firefox）、msRequestFullscreen（IE/Edge） - 务必包裹
.catch()捕获拒绝错误，比如用户未点击、视频未加载完成、或页面不在焦点中
监听 fullscreenchange 实时响应状态
全屏进入或退出时，document 会触发 fullscreenchange 事件，这是更新 UI 的唯一可靠时机。
- 通过
document.fullscreenElement判断当前是否处于全屏——若等于你的 video 元素，说明是它在全屏；若为 null，则已退出 - 据此切换按钮文字（如“退出全屏” ↔ “全屏播放”）、隐藏/显示控制条、调整视频尺寸类名
- 注意：该事件不带参数，也不区分进入还是退出，需靠判断
fullscreenElement值来分支逻辑
退出全屏统一用 document.exitFullscreen()
退出操作不作用于 video 元素本身，而是调用 document 方法，且同样需兼容处理。
立即学习“前端免费学习笔记（深入）”；
- 调用
document.exitFullscreen()，再依次回退到webkitExitFullscreen、mozCancelFullScreen、msExitFullscreen - 同样建议加
.catch()，避免在非全屏状态下报错中断流程 - 不要试图用 CSS 隐藏视频再 show 来“模拟退出”，那样会丢失状态同步，也破坏原生体验
移动端特别注意：playsinline + muted 是内联播放前提
iOS Safari 和微信 iOS 客户端默认阻止视频内联播放，强制跳转原生全屏。要实现“点击即在页面内全屏”，必须提前解除这个限制。
- video 标签必须同时设置：
playsinline、webkit-playsinline、muted - 三者缺一不可；静音是硬性要求，哪怕后续用 JS 开启声音，也得先静音启动
- 避免父容器使用
transform或overflow: hidden，这些 CSS 会意外触发 fallback 全屏
