html5全屏观影需对video元素调用requestfullscreen()并兼容webkit/ms前缀，用:fullscreen伪类适配样式，监听fullscreenchange事件同步状态，移动端须响应用户手势。

在 HTML5 中，用全屏按钮调用 requestFullscreen() 实现沉浸式观影，核心是正确触发全屏、处理浏览器兼容性、适配视频容器，并响应退出行为。关键不在于“一键全屏”，而在于让视频元素真正撑满屏幕且保持可控。

按钮绑定 requestFullscreen 并指定目标元素

不能对任意元素调用全屏，必须作用于视频（<video></video>）或其父容器（如带 poster、控制栏的 <div>）。推荐直接对 <code><video></video> 调用，避免布局错乱：

• 给视频加 id="myVideo"，按钮点击时获取该元素
• 调用 videoEl.requestFullscreen()（注意大小写：Chrome/Firefox/Edge 用 requestFullscreen，旧版需兼容 webkitRequestFullscreen 等）
• 不要对 document 或 body 调用——它不会让视频自动铺满，反而可能引发样式异常

适配不同浏览器的全屏 API 前缀

虽然现代浏览器已统一支持标准 requestFullscreen，但为兼容 Safari 10–12 和旧版 Chrome，建议封装一个安全调用函数：

• 检查元素是否存在 requestFullscreen 方法
• 否则依次尝试 webkitRequestFullscreen、msRequestFullscreen
• 调用时无需传参（Safari 旧版曾支持 { navigationUI: 'hide' }，但已废弃，不必处理）

全屏后优化视频显示与交互体验

进入全屏只是开始，还需确保视觉和操作符合“沉浸式”预期：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 用 :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）
• 避免在全屏中禁用右键或覆盖系统快捷键——这会干扰用户正常操作

不复杂但容易忽略：全屏不是特效开关，而是视口环境切换。重点始终是让视频成为唯一焦点，同时保持基本可用性。