playsinline在部分手机失效的根本原因是浏览器内核对属性的解析时机与方式不同：ios safari和微信ios需html硬编码+特定组合属性，安卓微信仅认x5-playsinline="true"，且受css布局、js触发时机等多重限制。
playsinline 为什么在部分手机上完全没反应
根本原因不是属性写错了，而是它压根没被浏览器“看到”或“受理”。iOS Safari 和微信 WebView 对 playsinline 的校验是硬性且早于 JS 执行的——只认初始 HTML 字符串里明文写出的属性，JS 动态加 setAttribute('playsinline', '') 或框架里条件渲染（比如 Vue 的 v-if 延迟挂载）都会让这个属性失效。
安卓端问题更隐蔽：部分定制浏览器（如小米、华为自带浏览器）根本不读 playsinline，只认腾讯 X5 内核的 x5-playsinline；而微信安卓版甚至会忽略 webkit-playsinline，只响应 x5-playsinline="true"。
- 必须在原始 HTML 中硬编码，不能靠 JS 插入或框架首次渲染后补
- 拼写错误（比如
playinline少个s）、赋值写法（playsinline="true"）会导致整个属性被当作文本忽略 - React 中用
playsInline（PascalCase）会被自动转成小写，但前提是它出现在初始render()输出中，不能等useEffect里补 - Vue 中若
:playsinline="showVideo"绑定值为false，该属性根本不会出现在最终 DOM 上
微信 iOS 和安卓对 playsinline 的处理完全不同
微信不是单一环境，iOS 和安卓分别跑在 WKWebView 和 X5 内核上，对同一套 HTML 属性的解析逻辑差异极大。你在 iOS 上跑通的写法，在安卓微信里可能直接被无视。
iOS 微信必须同时满足：playsinline + webkit-playsinline + muted + autoplay + x5-video-player-type="h5-page"；而安卓微信只认 x5-playsinline="true"，前两者基本无效。
- iOS 微信：漏掉
x5-video-player-type="h5-page"，大概率 fallback 到全屏播放器；加了但没配x5-video-orientation="portrait"，可能被横屏劫持 - 安卓微信：只写
playsinline没用，必须显式加x5-playsinline="true" - 直播流（m3u8）场景下，
x5-video-player-type="h5-page"反而会强制全屏，此时应去掉，改用x-webkit-airplay="allow"+x5-playsinline="true" - 微信 8.0.32+ 开始支持
x5-playsinline，但低版本仍需兜底逻辑
CSS 布局异常会让所有 HTML 属性形同虚设
哪怕 playsinline、webkit-playsinline、muted 全写了，一个 transform: translateZ(0) 或 will-change: transform 就能让 iOS Safari 主动放弃内联策略，直接跳全屏。这不是 bug，是 Safari 对“非标准渲染层”的主动降级。
微信 WebView 更敏感：父容器用了 overflow: hidden、position: fixed、object-fit: cover + width: 100% 这类组合，X5 内核会判定为“非标准容器”，直接忽略 playsinline。
-
<video></video>必须有明确宽高（哪怕是width="100%" height="200"），不能靠 CSS 完全撑开 - 避免任何父级元素使用
transform、scale、rotate，包括隐式触发（如will-change） - 微信中嵌套层级不能过深，
<video></video>最好放在body直接子级或第二层内 - 禁用
object-fit: cover与width: 100%同时使用，X5 内核会误判为拉伸失真而降级
JS 播放触发时机不对，等于白配 playsinline
HTML 属性齐全只是入场券，真正决定是否内联播放的是播放调用上下文。Safari 要求 play() 必须发生在用户手势事件的同步执行栈中——click、touchstart 回调里立刻执行，延迟哪怕 1ms（比如 setTimeout 或 Promise resolve 后）都会被拒绝，且不报错，只静默 fallback 全屏。
常见陷阱：监听 canplay 或 loadeddata 后自动 play()，或者用 document.addEventListener('touchstart', ...) 这种泛监听，Safari 不认作有效用户激活。
- 必须绑定到可交互元素（
button、a）的click或touchstart事件，且play()调用不能脱离该事件回调作用域 -
touchend不稳定（防误触机制可能拦截），优先用click - 解除静音（
video.muted = false）也必须和play()在同一句或紧邻语句，不能异步 - 微信中首次播放必须由用户点击触发，
autoplay即使配了muted也可能被拦截，建议默认隐藏 controls，用自定义按钮接管
最麻烦的点不在属性本身，而在不同平台对“同一份代码”的解释权完全不同：iOS Safari 看的是 HTML 字符串+CSS 布局健康度，微信 iOS 看的是 X5 专有属性+嵌套深度，安卓微信只认 x5-playsinline，而某些国产浏览器干脆不认任何 inline 属性。没有一劳永逸的写法，只有按平台分发的最小可行组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
