playsinline 不是独立开关，而是需与 webkit-playsinline、muted、autoplay、loop、controls="false" 及平台私有属性协同生效的准入条件，任一缺失或 js/css 不当操作均导致全屏fallback。
playsinline 不是“让视频内联”的开关，而是 iOS Safari 向你收的一个“入场券”——没它，必全屏；有它，还得把其他四张票（muted、autoplay、loop、controls="false"）一起交齐，才可能被放行。
为什么只加 playsinline 依然全屏
iOS Safari 对内联播放执行的是“全条件校验”，不是“或逻辑”。漏掉任意一项，它就直接 fallback 到原生全屏播放器。
-
webkit-playsinline没写：iOS 9–14.8 的设备会完全忽略playsinline，必须两个属性同时存在 -
muted缺失：有声视频在无用户手势时根本播不起来，playsinline根本没机会生效 -
autoplay没配：即使用户点了播放，首次触发若没autoplay+muted，Safari 可能仍判定为“非可信上下文”而强制全屏 -
controls="false"没显式声明：省略controls或设为false但没用 CSS 隐藏，某些 iOS 17 设备会检测到“控件不可见”而主动降级
playsinline 在不同环境的实际生效路径
它不是统一标准，而是分层兜底：
- iOS Safari 10+：
playsinline是主入口，但必须和webkit-playsinline共存才稳 - 微信 iOS 客户端（X5 内核）：
playsinline和webkit-playsinline都无效，必须加x5-video-player-type="h5-page"才走 H5 播放器 - iOS Safari + AirPlay 场景：缺
x-webkit-airplay="allow"，权限校验失败也会 fallback 全屏 - Vue/React 中动态渲染：
playsinline必须在初始 HTML 中硬编码，JS 用setAttribute补上完全不生效
常见 JS 动态操作导致 playsinline 失效的坑
哪怕 HTML 层面写全了，运行时一个操作就可能让整套策略崩盘：
- 用 JS 动态设置
video.src后，没调video.load()：Safari 不重新解析媒体元数据，playsinline等属性不被二次校验 - 在
useEffect或onMounted里直接video.play()：脱离用户手势（click/touchend），iOS 静默拒绝，且不会报错 - 用
setTimeout(() => video.play(), 0)：哪怕延时 0ms，也已不在手势事件栈中，等同于自动播放被拦截 - 视频加载完成监听用了
load事件：它不保证解码就绪，应监听canplay或loadeddata后再play()
CSS 和布局干扰也会让 playsinline 形同虚设
iOS Safari 会对容器做隐式健康检查，异常布局会触发 fallback：
- 父容器用了
transform（如scale(0.9)或translateZ(0)）：部分 iOS 16+ 设备会认为“渲染上下文不稳定”，强制全屏 - 容器设置了
overflow: hidden：可能截断内联播放器 UI 层，Safari 主动降级 -
object-fit: cover但宽高比与视频源不匹配：造成视觉拉伸，某些机型判定为“布局异常”而弃用内联 - 没设明确宽高或
max-width: 100%：视频初始尺寸为 0×0，Safari 认为“无有效渲染区域”，直接跳全屏
真正起作用的从来不是单个 playsinline，而是它所锚定的那一整套 HTML 属性组合、JS 触发时机、CSS 布局约束和平台私有属性。任何一环松动，它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
