ios safari 的 playsinline 生效需同时满足多个硬性条件：必须写 webkit-playsinline（ios 9–14.8）、muted、autoplay、controls="false"，且属性值为空或布尔真；react/vue 中写法和时机关键；微信需额外适配 x5 属性；css 布局异常（如 transform、fixed 定位）也会导致失效。
为什么加了playsinline还是全屏
不是属性没写，而是它压根没被浏览器“受理”。iOS Safari 把 playsinline 当成一张入场券——必须同时满足多个硬性条件，缺一不可，否则直接跳过校验，fallback 到全屏播放器。
常见错误现象包括：视频点击后仍全屏、页面刷新后首次播放强制横屏、微信里点一下就跳转到 X5 全屏页。这些都不是 JS 控制失败，而是 HTML 层面的策略从一开始就没生效。
-
webkit-playsinline没一起写：iOS 9–14.8 完全忽略playsinline，只认私有属性 -
muted缺失：有声视频在无用户手势时根本播不起来，playsinline压根没机会触发 -
autoplay没配：首次播放若没autoplay+muted，Safari 可能判定为“非可信上下文”，强制全屏 -
controls="false"没显式声明：省略controls或设为false但没用 CSS 隐藏，某些 iOS 17 设备会检测到“控件不可见”而主动降级
React/Vue 中怎么正确写 playsinline
框架会把驼峰写法自动转成小写，但时机和值类型很关键。写错位置或绑定空值，DOM 上根本不会出现该属性。
- React 中必须写
playsInline（PascalCase），且在首次render就存在；不能等useEffect里动态setAttribute—— iOS Safari 不认运行时添加的playsinline或webkit-playsinline - Vue 中用
v-bind:playsinline="true"，但绑定值要是true，不能是false或null，否则该属性根本不会出现在最终 DOM 上 - 所有属性值都应为空字符串或布尔真值：
playsinline、webkit-playsinline、muted、autoplay都不要写成playsinline="true"这类赋值形式，拼写或语法错误都会导致失效
微信 iOS 和安卓对 playsinline 的处理差异
微信不是标准浏览器，X5 内核有自己的规则。同一套 HTML 在 iOS 微信和安卓微信里行为可能完全相反。
- iOS 微信必须加
x5-video-player-type="h5-page"，漏掉大概率 fallback 到自己的全屏播放器；加了但没配x5-video-orientation="portrait"，可能被横屏劫持 - 安卓微信只认
x5-playsinline="true"，playsinline和webkit-playsinline对它基本无效 - m3u8 直播流场景下，
x5-video-player-type="h5-page"反而会强制全屏，此时应去掉，改用x-webkit-airplay="allow"+x5-playsinline="true" - 若用
video.src动态加载，必须调video.load()再video.play()，否则 Safari 不重新校验内联策略
CSS 布局异常会让 playsinline 形同虚设
哪怕所有 HTML 属性都写对了，一个 transform 就能让整套策略崩盘。iOS Safari 会对容器做隐式健康检查，只要布局偏离“常规流”，就拒绝内联播放。
- 避免给
video或其父容器设transform、perspective、will-change等触发合成层的属性 - 确保
video没被包裹在position: fixed或position: absolute且脱离文档流的容器里 - 不要用
object-fit: cover+height: 100vh组合强行撑满视口，某些 iOS 版本会误判为“非嵌入式容器” - 真机测试前，先在 Safari 的 Elements 面板里手动删掉疑似干扰的 CSS，看是否恢复内联——这是最快速定位布局问题的方式
真正难的不是写对属性，而是让所有条件在同一时刻、同一上下文里全部成立。任何一个环节在 DOM 渲染完成前缺失或错位，playsinline 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
