加playsinline属性本身不能避免ios强制全屏，必须同时满足muted、webkit-playsinline、用户手势触发等硬性条件；漏掉任一环，视频仍会全屏播放。
加 playsinline 属性本身不能避免 iOS 强制全屏，它只是“申请内联播放”的提示；真正起效必须同时满足 muted、webkit-playsinline、用户手势触发（或静音自动播放）等硬性条件，漏掉任一环，视频照跳全屏。
为什么只写 playsinline 没用
iOS Safari 对内联播放的校验是“全链路式”的：playsinline 只是声明意愿，不参与实际策略执行。系统会检查：是否在初始 HTML 中硬编码该属性、是否伴随 webkit-playsinline（iOS 9–16.4 多数版本只认这个）、视频是否已 muted、play() 是否由 click/touchend 同步调用。任意一项缺失，Safari 就降级到全屏上下文执行播放。
-
playsinline是 HTML5 标准属性，iOS 10+ 支持；webkit-playsinline是旧版 WebKit 私有属性，iOS 9–10.3 仅认它——两者必须共存 - 拼写错误如
playinline（少 s）或webkit-playsinline="true"（赋值）会导致整个属性被忽略 - JS 动态添加（如
video.setAttribute('playsinline', '')）在 iOS Safari 中完全无效，必须初始 DOM 就存在
微信 WebView 下要额外加 x5-playsinline="true"
微信 iOS 和安卓用的是不同内核：iOS 走 WKWebView（依赖标准 + WebKit 属性），安卓走 X5 内核（只认 x5-playsinline="true"）。混写不会出错，但缺一不可。
- iOS 微信：必须同时有
playsinline和webkit-playsinline，否则旧版本直接失效 - 安卓微信：只靠
x5-playsinline="true"，其他两个属性它基本忽略；React 中注意必须显式赋值，不能只写x5-playsinline - 最稳妥写法：
<video playsinline webkit-playsinline x5-playsinline="true"></video>
静音和用户手势是绕不开的硬前提
iOS 的 autoplay 策略和内联播放深度绑定：不静音 = 不允许自动内联；无真实点击/触摸 = 拒绝内联上下文。动态设置 muted（如 video.muted = true）往往来不及生效。
-
muted必须写在 HTML 标签上，不能靠 JS 补充 - 推荐用按钮触发：
<button onclick="video.play()">播放</button>，比监听canplay后自动调用更可靠 - 若必须自动播放，确保
muted+autoplay+ 所有 playsinline 属性全写，并把play()放在首次touchstart事件中（而非setTimeout或接口回调）
CSS 和布局干扰常被忽略
即使属性全对，父容器用了 transform、perspective 或 overflow: hidden，iOS 渲染引擎会判定为“非标准布局”，直接禁用内联播放。
- 给
<video></video>设置明确宽高或max-width: 100%，防止布局抖动 - 避免父元素设置
transform、will-change、overflow: hidden；实测这些 CSS 会让部分 iOS 16+/17 设备 fallback 到全屏 - 视频源必须是 H.264 编码的 MP4，WebM 或未优化的 HEVC 在部分 iOS 版本无法内联
真正卡住播放链路的，从来不是属性有没有写全，而是触发时机是否处于 Safari 认可的“安全上下文”——比如一个被 transform 包裹的容器里，哪怕所有属性都对，play() 也会被静默拒绝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
