HTML5全屏观影需对video元素调用requestFullscreen()并兼容webkit/ms前缀，用:fullscreen伪类适配样式，监听fullscreenchange事件同步状态，移动端须响应用户手势。
在 HTML5 中，用全屏按钮调用 requestFullscreen() 实现沉浸式观影，核心是正确触发全屏、处理浏览器兼容性、适配视频容器，并响应退出行为。关键不在于“一键全屏”，而在于让视频元素真正撑满屏幕且保持可控。
按钮绑定 requestFullscreen 并指定目标元素
不能对任意元素调用全屏，必须作用于视频（<video>）或其父容器（如带 poster、控制栏的 <div>）。推荐直接对 <video> 调用，避免布局错乱：
- 给视频加
id="myVideo"，按钮点击时获取该元素 - 调用
videoEl.requestFullscreen()（注意大小写：Chrome/Firefox/Edge 用requestFullscreen，旧版需兼容webkitRequestFullscreen等） - 不要对
document或body调用——它不会让视频自动铺满，反而可能引发样式异常
适配不同浏览器的全屏 API 前缀
虽然现代浏览器已统一支持标准 requestFullscreen，但为兼容 Safari 10–12 和旧版 Chrome，建议封装一个安全调用函数：
- 检查元素是否存在
requestFullscreen方法 - 否则依次尝试
webkitRequestFullscreen、msRequestFullscreen - 调用时无需传参（Safari 旧版曾支持
{ navigationUI: 'hide' }，但已废弃，不必处理）
全屏后优化视频显示与交互体验
进入全屏只是开始，还需确保视觉和操作符合“沉浸式”预期：
立即学习“前端免费学习笔记（深入）”；
- 用
:fullscreen（或::-webkit-full-screen等伪类）重置视频宽高为100vw / 100vh，并设object-fit: contain或cover防拉伸 - 隐藏非必要 UI（如标题栏、侧边菜单），但保留基础控制条（播放/音量/退出按钮），位置固定在底部
- 监听
fullscreenchange事件，在退出时恢复原布局、重置控制条可见性 - 移动端需注意：iOS Safari 不允许 JS 触发全屏，只能响应用户手势（如点击视频本身），按钮需叠加在视频上并
pointer-events: auto
退出全屏与状态同步
用户可通过 ESC、系统退出按钮或自定义按钮离开全屏，需主动响应：
- 监听
document上的fullscreenchange事件，通过document.fullscreenElement判断当前状态 - 若为
null，说明已退出，此时可更新按钮图标（如从「全屏」变回「退出全屏」）、恢复页面滚动等 - 提供显式退出按钮，调用
document.exitFullscreen()（同样需兼容webkitExitFullscreen、msExitFullscreen） - 避免在全屏中禁用右键或覆盖系统快捷键——这会干扰用户正常操作
不复杂但容易忽略：全屏不是特效开关，而是视口环境切换。重点始终是让视频成为唯一焦点，同时保持基本可用性。
