playsinline 不是禁止全屏的开关，而是声明允许内联播放，实际是否内联需同时满足 webkit-playsinline、muted、controls 隐藏、src 硬编码、用户手势触发 play() 等全套条件，缺一不可。
playsinline 不是“禁止全屏”的开关，它只是向 iOS Safari 声明“允许内联播放”。是否真能内联，取决于一整套条件是否同时满足——漏掉任何一个，视频照旧跳全屏。
为什么加了 playsinline 还是全屏？
常见失效原因不是属性没写，而是关键配套缺失或运行时被破坏：
-
webkit-playsinline没一起写：iOS 9–16.4 多数版本必须两个都存在，只写playsinline会被忽略 -
muted缺失：有声视频在 iOS 上无法自动播放，首次点击仍会 fallback 到全屏 -
controls被设为false但没用 CSS 彻底隐藏：部分 iOS 17 设备检测到控件不可见，会主动降级为全屏模式 - 视频
src是 JS 动态设置的：Safari 不识别后续注入的playsinline，必须在初始 HTML 中硬编码该属性 - 在
setTimeout或接口回调里调用play()：iOS 要求首次播放必须由用户手势（click/touchend）同步触发
playsinline 和 webkit-playsinline 必须同时出现
这两个属性不是可选搭配，而是 iOS 兼容性兜底组合：
-
playsinline是 HTML5 标准属性，iOS 10+ 支持 -
webkit-playsinline是旧版 WebKit 私有属性，iOS 9–10.3 仅认这个 - 拼写必须准确：
playinline（少 s）、webkit-playsinline="true"（赋值）都会失效 - 不能靠 JS 动态添加：例如
el.setAttribute('webkit-playsinline', '')在 iOS Safari 中完全不生效
React/Vue 中怎么写才真正生效？
框架层容易掩盖 DOM 层的硬性要求，尤其在属性命名和渲染时机上：
- React 中写
playsInline（PascalCase），React 会自动转成小写playsinline渲染到 DOM —— 但前提是它在首次render就存在，不能等useEffect里再 patch - Vue 中用
v-bind动态绑定playsinline属性，若绑定值为false或null，该属性根本不会出现在最终 DOM 上，等于没写 - 视频源动态加载时（如从 API 获取
src），必须手动调用videoEl.load()再videoEl.play()，否则 Safari 不重新校验内联策略 - 避免用
ref+setTimeout触发播放：哪怕延时 0ms，也脱离了用户手势上下文，play()会被静默拒绝
微信 WebView 下还得多加两个属性
微信 iOS 客户端用的是 X5 内核，对内联播放有额外限制：
-
x5-video-player-type="h5-page"：强制走 H5 播放器，不启用 X5 全屏播放器 -
x5-video-orientation="portrait"：指定竖屏内联，避免横屏时自动 fallback - 漏掉任一个，即使 Safari 正常，微信里依然全屏
-
x-webkit-airplay="allow"建议加上：防止因 AirPlay 权限缺失导致的意外全屏 fallback
最易被忽略的一点：CSS 的 object-fit 和容器尺寸不匹配，也会触发 Safari 的 fallback 全屏策略——哪怕所有属性都写对了，只要布局让视频“撑不开”或“被裁太狠”，iOS 就可能放弃内联。这不是 bug，是 Safari 主动降级的保护机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
