playsinline不是可选项，而是ios safari和微信ios版实现视频行内播放的硬性开关；不加则必全屏，加了还需满足muted、viewport声明、无transform/overflow:hidden干扰等条件才真正生效。
playsinline 不是可选项，是 iOS Safari 和微信 iOS 版中实现视频行内播放的硬性开关。不加它，video 一触发就会跳原生全屏播放器，自动播放链直接断裂。
为什么 playsinline 单独加了也不起作用
它只是“允许内联”的声明，不是“保证内联”的魔法开关。iOS 要求同时满足多个条件才真正放行：
-
muted必须存在——有声视频在无用户交互时，iOS 直接拒绝播放，playsinline根本没机会生效 -
autoplay必须配合muted使用，否则autoplay被忽略，playsinline失去意义 - 父容器不能有
transform或overflow: hidden——这些 CSS 会干扰 WebKit 的内联渲染判定 - 必须有
<meta name="viewport">声明——微信旧版（7.0.5 之前）尤其敏感
playsinline 在 React 中怎么写才对
React JSX 里要写成 playsInline（PascalCase），但最终渲染到 DOM 还是小写的 playsinline。React 会自动转换，不需要手动用 dangerouslySetInnerHTML。
常见错误写法：playsinline={true} 或 webkitPlaysinline——前者会被 React 当作字符串 prop 渲染失败，后者是已废弃的私有属性，新版 iOS 已不识别。
正确写法示例：
<video autoplay muted playsinline loop controls="{false}" preload="auto"><source src="bg.mp4" type="video/mp4"></source></video>
哪些场景下 playsinline 会失效，但你未必意识到
最隐蔽的问题往往出在资源本身：
-
<source type="video/webm"></source>指向一个 .mp4 文件——Safari 直接跳过该 source，整个video变成空载，playsinline彻底无从谈起 - 视频编码不是 H.264 + AAC——比如用了 HEVC 或 AV1，iOS 无法解码，加载失败，自然不会进入播放流程
- 服务端未返回正确的
Content-Type: video/mp4响应头——部分 CDN 或 Nginx 配置缺失会导致 MIME 类型不匹配，浏览器拒收 - 使用了
background: url(video.mp4)这类 CSS 方式——iOS 完全不支持，必须用<video></video>标签
真机测试比模拟器可靠得多；playsinline 看似简单，但它像一根引信，前面任何一个环节断了，后面整条自动播放链就哑火。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
