移动端视频全屏需用户手势触发，禁用异步调用；ios需playsinline+muted+用户交互；兼容性上依次尝试requestfullscreen、webkitrequestfullscreen、webkitenterfullscreen；微信等webview应优先使用其sdk跳转或css模拟。
HTML <video></video> 在移动端浏览器无法全屏怎么办
绝大多数情况下，不是代码写错了，而是移动端浏览器强制要求：全屏触发必须由用户真实手势（如点击、触摸）发起，且不能在异步回调（比如 setTimeout、fetch 响应后）里调用 requestFullscreen()。
常见错误现象：Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
- 确保调用
videoElement.requestFullscreen()直接绑定在onclick或ontouchend事件处理器内，中间不经过 Promise、定时器或网络请求链路 - 不要在
autoplay播放后自动全屏——即使视频已就绪，也得等用户点一下按钮 - 部分安卓 WebView（如微信内置浏览器）需额外加
webkitRequestFullscreen()兜底，但仅限用户手势上下文内调用
为什么 playsinline 属性在 iOS Safari 上关键
iOS Safari 默认禁止 <video></video> 内联播放，一播放就跳原生全屏界面；加 playsinline 是绕过这个限制的唯一合法方式。
使用场景：嵌入式短视频、弹幕页、图文流中的自动播放卡片
- 必须同时满足三个条件才生效：
playsinline+muted+ 用户首次交互后调用play() -
playsinline是布尔属性，写成playsinline="true"反而无效，正确写法是playsinline或playsinline="" - 若视频带声音，又想内联播放，必须先静音，等用户点击“取消静音”后再调用
video.muted = false和video.play()
移动端全屏 API 兼容性差异与 fallback 处理
不同系统对全屏 API 的支持名不同，且部分旧版 WebView 不支持标准方法，必须按顺序尝试。
参数差异：iOS Safari 支持 webkitEnterFullscreen()（仅 <video></video> 元素），但 Android Chrome 只认标准 requestFullscreen()
- 优先用标准方法：
videoElement.requestFullscreen() - 失败时降级：
videoElement.webkitRequestFullscreen?.()（注意可选链，避免报错） - 再失败时尝试 iOS 专属：
videoElement.webkitEnterFullscreen?.()（仅 Safari 有效，其他浏览器无此方法） - 不要依赖
document.fullscreenElement判断状态——iOS Safari 完全不更新该值，得靠监听webkitfullscreenchange事件
微信/抖音/QQ 等 App 内嵌 WebView 的特殊限制
这些环境本质是定制 WebView，它们可能屏蔽标准全屏 API，或只允许调用自家 JS-SDK 提供的全屏接口。
性能影响：强行注入 polyfill 或反复重试全屏方法，会导致页面卡顿或触发安全策略拦截
- 微信中优先使用
wx.miniProgram.navigateTo({ url: '/pages/video/video?vid=xxx' })跳转到独立视频页，而非在当前页强撑全屏 - 抖音 WebView 中，
requestFullscreen()几乎总是被忽略，建议改用自定义“放大按钮”+ CSS 缩放模拟全屏视觉效果 - 检测是否在微信中：
navigator.userAgent.includes('MicroMessenger')，再决定走 SDK 还是降级方案
最易被忽略的一点：全屏后视频尺寸、父容器定位、z-index 层级会突变，尤其当 <video></video> 包在 position: fixed 或 flex 容器里时，退出全屏常出现布局错乱——务必监听 fullscreenchange 和 webkitfullscreenchange，手动重置关键样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
