video元素需通过用户手势触发requestFullscreen()实现全屏，退出须用document.exitFullscreen()并监听fullscreenchange事件，移动端需加playsinline且兼容各浏览器限制。
video 元素如何触发全屏？
HTML5 的 video 元素本身不提供“点击即全屏”的内置行为，必须通过 JavaScript 调用 requestFullscreen() 方法。这个方法只能在用户手势（如 click、touchend）触发的回调中安全调用，否则浏览器会静默拒绝并抛出 TypeError: Document not active 或类似错误。
常见错误是把全屏逻辑写在 autoplay 完成后、或定时器里——这些都不是有效用户操作上下文，必然失败。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 绑定
click事件到播放按钮或视频容器上，不要直接绑在video标签上（部分浏览器对video元素的点击事件支持不稳定） - 调用前加判断：
if (video.requestFullscreen) { video.requestFullscreen(); }，避免旧版 Safari 用webkitEnterFullscreen()（该方法仅 iOS 原生播放器响应，且不可控 UI） - 注意：Chrome/Edge 在 iframe 中启用全屏需设置
allow="fullscreen"属性，否则调用直接被忽略
退出全屏为什么没反应？
退出全屏不是调用 exitFullscreen() 就完事。它实际是挂载在 document 上的方法，且只在当前处于全屏状态时才有效。如果页面有多个 video 或其他元素曾进入全屏，但未正确清理状态，document.exitFullscreen() 可能无响应或报错 NotFoundError。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的问题是：某些安卓 WebView 或低版本浏览器（如 Android 4.4 内置浏览器）根本不支持 exitFullscreen()，只能监听 fullscreenchange 事件后手动隐藏自定义控制栏，假装“退出”。
实操建议：
- 统一用
document.exitFullscreen()，不要写video.exitFullscreen()（不存在） - 退出前检查状态：
if (document.fullscreenElement) document.exitFullscreen(); - 务必监听
document.addEventListener('fullscreenchange', ...)，而不是只依赖 JS 主动调用结果——用户按 ESC 或系统返回键退出时，JS 只能靠这个事件感知
全屏后样式错乱、controls 消失怎么办？
全屏状态下，浏览器会将 video 提升为顶层渲染对象，脱离普通 CSS 流，原有 width/height、object-fit、甚至 z-index 都可能失效。原生 controls 在部分浏览器（如 Firefox）全屏后自动隐藏，且无法通过 CSS 重新显示。
这不是 bug，是规范行为：全屏 API 设计初衷就是交由浏览器接管 UI 控制权。强行 hack（比如用 transform: scale() 模拟全屏）会导致音画不同步、触控坐标偏移等问题。
实操建议：
- 放弃修复原生 controls 显示，改用自定义控制栏 +
video.controls = false，全屏前后统一管理按钮显隐 - 利用
:fullscreen伪类做样式适配，例如：video:fullscreen { width: 100vw; height: 100vh; object-fit: contain; } - 注意 Safari 对
:fullscreen支持需加-webkit-前缀，且仅作用于全屏元素自身，不影响其子元素
移动端全屏有哪些硬限制？
iOS Safari 和大部分安卓 WebView 对 requestFullscreen() 有严格限制：仅允许 <video> 元素调用，且必须满足 playsinline + 用户手势触发两个条件。缺少 playsinline，iOS 会强制跳转原生播放器（此时 JS 完全失去控制权）。
更麻烦的是，微信内置浏览器（X5 内核）和 QQ 浏览器会拦截 requestFullscreen() 并静默失败，连错误都不抛——你得靠 fullscreenchange 事件是否触发来间接判断。
实操建议：
-
video标签必须带playsinline和webkit-playsinline属性 - 安卓端可尝试用
video.webkitRequestFullscreen()作为兜底（仅部分三星/华为机型有效） - 对微信等环境，建议降级方案：不强求全屏，改为横屏提示 + 手动缩放容器尺寸模拟沉浸感
全屏切换看着简单，真正跨端稳定运行的关键，在于始终把浏览器当成“不可信协作者”——它给的 API 有断层，给的反馈不一致，给的权限随时收走。别试图用一套代码打天下，得在 fullscreenchange 事件里反复校验状态，在每个 requestFullscreen() 后埋好失败回调，在每个安卓 UA 字符串里预判它的脾气。
