必须同时设置playsinline、webkit-playsinline和x5-playsinline="true"；静音与用户手势为硬性前提，且需规避transform、overflow:hidden等css干扰，确保播放调用处于安全上下文。
必须手动写全 playsinline、webkit-playsinline 和 x5-playsinline="true"，缺一不可；不静音、无用户手势、父容器有 transform 或 overflow: hidden，照样强制全屏。
微信 iOS 和安卓要分开处理，属性不能混用
微信 iOS 用的是 WKWebView（基于 Safari），依赖标准 + 私有属性；安卓用微信 X5 内核，只认 x5-playsinline="true"，其他两个属性它基本忽略。
- iOS 微信：必须同时有
playsinline和webkit-playsinline，否则旧版本（如 iOS 10–12）直接失效 - 安卓微信：只靠
x5-playsinline="true"，playsinline单独写等于没写 - 最稳妥写法：
<video playsinline webkit-playsinline x5-playsinline="true"></video> - 注意：
x5-playsinline是字符串属性，值必须显式写出（React 中尤其要注意，不能只写x5-playsinline）
为什么加了所有属性还是跳全屏？
属性只是“准入条件”，不是“保证开关”。真正卡住播放链路的，往往是触发时机和上下文限制。
- 自动播放未静音 → iOS 直接拦截，降级全屏上下文执行
play() - 在
setTimeout、fetch回调或load事件里调用play()→ Safari 认为非用户手势，拒绝内联 - 父容器用了
transform、perspective或will-change→ iOS 渲染引擎判定为“非标准布局”，禁用内联 - 视频源是
m3u8直播流 →x5-video-player-type="h5-page"会强制全屏，此时应去掉该属性，改用x-webkit-airplay="true"+x5-playsinline="true"
静音和用户手势是绕不开的硬性前提
iOS 的 autoplay 策略和内联播放深度绑定：不静音 = 不允许自动内联；无真实点击/触摸 = 拒绝内联上下文。
-
muted必须写在 HTML 标签上，动态设置（如video.muted = true）可能来不及生效 - 推荐用按钮触发：
<button onclick="video.play()">播放</button>，比监听canplay后自动调用更可靠 - 若必须自动播放，确保
muted+autoplay+ 所有 playsinline 属性全写，并把play()放在user activation后（比如首次touchstart事件中） - 微信安卓部分版本对
autoplay更敏感，即使静音也可能拦截，建议默认隐藏 controls，用自定义按钮接管
CSS 和容器干扰常被忽略
很多页面调试半天发现是布局样式“暗中作祟”，尤其是用现代 CSS 布局时容易踩坑。
-
overflow: hidden在父级元素上 → iOS 会禁用内联渲染，哪怕视频本身没溢出 -
transform: translateZ(0)、perspective: 1px→ 触发硬件加速后，iOS 认为“渲染环境异常”，关闭内联支持 - 没设
width/height或max-width: 100%→ 视频尺寸塌陷，Safari 可能 fallback 到全屏以保障可播 - viewport 缺失或
user-scalable=no过度限制 → 微信 iOS 某些版本会误判交互能力，影响内联策略
真正难的不是写对那几个属性，而是让整个播放链路——从标签渲染、属性加载、媒体就绪、到 play() 调用——全程处于浏览器认可的“安全上下文”里。任何一环脱节，都会被 iOS 或 X5 内核无声降级，你看到的只是“又跳全屏了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
