playsinline 本身不是开关，而是向 ios safari 表明内联意愿的信号；是否生效取决于同时满足 muted、autoplay、loop、controls="false" 四个条件，并需配合 webkit-playsinline、正确 js 执行时机、兼容 css 及平台特有属性（如微信 ios/安卓差异）。
playsinline 不是开关，是 iOS Safari 的入场券
加 playsinline 本身不会让视频内联播放，它只是向 iOS Safari 表明“我想内联”的意愿。浏览器只认这个信号，但是否放行，取决于你有没有同时交齐另外四张票：muted、autoplay、loop、controls="false"。漏掉任意一个，它就直接 fallback 到全屏播放器，连错误都不报。
为什么写了 playsinline 还是跳全屏
最常见原因不是属性没写对，而是校验链断了：
-
webkit-playsinline没一起写：iOS 12–14.8 设备会完全忽略playsinline，必须两个属性共存 -
muted是硬编码缺失：动态设置video.muted = true太晚，Safari 在解析 HTML 阶段就已决定是否允许内联 - JS 调用
play()不在用户手势上下文中：比如在setTimeout、fetch回调或canplay事件里调用，一律被拦截 -
controls="false"写了但没配合 CSS 彻底隐藏：某些 iOS 17 设备会检测到控件 DOM 存在，哪怕 display: none，也判定为“可交互”，强制全屏
微信 iOS 和安卓必须分开处理
微信不是统一平台，iOS 和安卓用的是两套内核，属性不能混用：
- iOS 微信（WKWebView）：依赖
playsinline+webkit-playsinline+x5-video-player-type="h5-page" - 安卓微信（X5 内核）：只认
x5-playsinline="true"（注意是字符串值，不是布尔属性），playsinline和webkit-playsinline对它基本无效 - 直播流（m3u8）场景下：
x5-video-player-type="h5-page"反而会强制全屏，此时得去掉它，换成x-webkit-airplay="allow"+x5-playsinline="true"
CSS 布局异常会让所有 HTML 属性失效
哪怕标签里写全了所有属性，一个看似无关的 CSS 就能让整套策略崩盘：
- 父容器用了
transform（如scale(0.9)、translateZ(0)）：iOS 16+ 会认为“渲染上下文不稳定”，直接降级全屏 - 容器设了
overflow: hidden：可能截断内联视频层，建议改用clip-path或显式设为visible - 没加标准 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1">缺失时，部分机型会拒绝内联
playsinline 就只剩个空壳。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
