iOS Safari 中 video 行内播放需同时满足：添加标准 playsinline 属性、兼容性保留 webkit-playsinline、静音（muted）且由用户手势触发或启用 muted autoplay。
在 iOS Safari 中， 元素默认会在点击播放时强制全屏，这是系统级限制。使用 playsinline 属性可让视频在页面内（即“行内”）播放，不跳转全屏——但需配合其他条件才真正生效。
1. 正确添加 playsinline 属性
该属性是布尔型，只需写属性名，无需赋值：
<video controls playsinline><source src="video.mp4" type="video/mp4"></source></video>
注意：仅写 playsinline 即可，playsinline="true" 或 playsinline="" 虽然部分浏览器兼容，但不符合 HTML5 规范，iOS 可能不识别。
2. 必须同时设置 webkit-playsinline（iOS 旧版本兼容）
iOS 10 及更早版本要求额外添加私有属性：
<video controls playsinline webkit-playsinline><source src="video.mp4" type="video/mp4"></source></video>
现代 iOS（11+）已支持标准 playsinline，但保留 webkit-playsinline 可确保向下兼容。
3. 视频需满足自动播放前提（关键！）
即使加了 playsinline，若视频试图自动播放（autoplay），iOS 仍可能拦截或强制全屏。要稳定行内播放，请遵守：
- 避免依赖
autoplay：iOS 要求用户手势触发播放（如点击按钮） - 播放前调用
.play()必须由用户操作（如onclick）发起 - 推荐关闭音频（
mute）并设autoplay muted，这样 iOS 允许静音自动播放且保持行内
示例（安全的静音自动播放）：
<video autoplay muted playsinline webkit-playsinline><source src="loop.mp4" type="video/mp4"></source></video>
4. 确保页面无其他干扰设置
以下情况可能导致 playsinline 失效：
- 父容器设置了
transform、will-change或overflow: hidden，可能影响 iOS 的内联渲染层 - 视频宽高为 0 或被 CSS 隐藏（如
display: none），播放时会 fallback 到全屏 - 未设置明确的
width和height，或使用object-fit: cover但容器尺寸异常
建议给 设置固定宽高或使用响应式约束（如 max-width: 100%; height: auto;）。
不复杂但容易忽略——playsinline 是开关，但 iOS 行内播放真正起效，靠的是属性 + 静音策略 + 用户交互三者配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
