ios safari和微信webview强制video全屏的根源是apple策略性限制：未声明playsinline、有音轨或无用户交互时必全屏；需同时设置playsinline、webkit-playsinline和muted才可稳定内联播放。
video 标签在 iOS 上强制全屏的根源
iOS Safari（包括微信 WebView）对 <video></video> 有默认行为限制：只要没显式声明 playsinline，且视频有音轨（哪怕静音）、或用户未与页面交互过，就会强制跳转全屏播放。这不是 bug，是 Apple 的策略性限制，目的是防止网页滥用自动播放干扰用户。
关键点在于：仅加 playsinline 不够，必须配合其他属性才能稳定内联播放。
必须同时设置的三个属性
playsinline 只是“申请内联”，真正生效还要看配套约束：
-
webkit-playsinline：iOS 10+ 仍需这个私有前缀（Safari 和大部分 WebView 都认） -
muted：iOS 要求自动播放（包括autoplay触发）必须静音；即使你后续用 JS 解除静音，也得先带muted -
autoplay（可选但常见）：如果想一进来就播，必须和muted绑定使用；否则用户需手动点击触发
示例正确写法：
<video src="example.mp4" playsinline webkit-playsinline muted autoplay controls></video>
JS 控制解除静音时的兼容性陷阱
很多场景需要“先静音自动播，再点按钮开声音”。这时用 JS 改 video.muted = false 在 iOS 上大概率失败，并报错 NotAllowedError: The request is not allowed by the user agent or the platform in the current context.
原因：iOS 要求“解除静音”操作必须发生在用户手势（如 click、touchend）的同步调用栈中，不能异步（比如 setTimeout 或 Promise 回调里）。
- ✅ 正确：绑定
button.addEventListener('click', () => { video.muted = false; video.play(); }) - ❌ 错误：在
setTimeout(() => { video.muted = false; }, 100)里执行 - ⚠️ 注意：iOS 15+ 对
play()的调用时机更敏感，建议muted = false和play()写在同一句或紧邻语句
微信 WebView 的额外限制
微信内置浏览器（尤其是 iOS 版）会进一步拦截某些内联行为，即使 HTML 属性写全也可能 fallback 到全屏。
应对措施：
- 确保页面
中有<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，避免缩放干扰播放器判定 - 避免在
position: fixed或transform容器里嵌套<video></video>，部分微信版本会忽略playsinline - 真机调试时，用微信开发者工具「调试」→「User Agent」切换成「iOS 微信」模式，比模拟器更准
实际生效与否，最终取决于 iOS 系统版本、微信版本、是否首次访问、以及用户是否已授权媒体自动播放——这些条件无法完全由前端控制，所以一定要准备 fallback：比如检测到全屏后显示提示文案，或提供手动“退出全屏”按钮。
最常被忽略的一点：本地开发时用 file:// 协议打开 HTML，iOS Safari 会直接禁用 playsinline，必须走 http:// 或 https:// 服务才能测试真实效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
