ios safari 中 video 标签需添加 playsinline 和 webkit-playsinline 属性，并配合 muted，才能实现内联播放；仅加 playsinline 不一定生效，还需确保用户手势触发播放或自动播放时已静音。
在移动端（尤其是 iOS Safari）中，<video></video> 标签默认会强制全屏播放，即使你设置了 width、height 或 CSS 布局，点击播放仍会跳转到原生全屏界面。解决这个问题的关键是使用 playsinline 属性。
playsinline 属性的作用
该属性告诉浏览器：视频应在当前页面内（即“行内”）播放，而不是调用系统级全屏播放器。它主要影响 iOS Safari 和部分 Android 浏览器（如微信内置浏览器、QQ 浏览器等）。
注意：playsinline 是布尔属性，只需写上即可，无需赋值（如 playsinline="true" 是无效写法）。
正确写法与必要配合项
仅加 playsinline 不一定生效，还需满足以下条件：
-
必须同时设置
webkit-playsinline（iOS 10 及更早版本兼容所需） -
推荐加上
muted属性：iOS 要求自动播放（autoplay）的视频必须静音，否则会被阻止；即使不自动播放，加muted也能提升 inline 播放成功率 -
避免依赖
autoplay单独触发：用户手势（如点击）触发的播放更可靠；若需自动播放，务必配合muted
示例代码：
常见失效原因与排查建议
如果加了 playsinline 仍强制全屏，检查以下几点：
- 是否遗漏
webkit-playsinline？iOS 旧版本（如 iOS 9–10）必须有它 - 是否在非用户手势上下文中调用
play()？例如在setTimeout或接口回调里直接video.play()，会被 Safari 拦截 - 是否设置了
allow="fullscreen; picture-in-picture"？某些场景下需显式允许内联播放，可尝试加allow="playsinline"（但多数情况非必需） - 是否用了第三方播放器（如 video.js、plyr）？需确认其配置已启用 inline 模式，并透传对应 HTML 属性
补充：CSS 与交互优化
即使支持 inline 播放，也建议做些小优化：
- 给
<video></video>设置明确宽高或max-width: 100%，防止布局抖动 - 禁用右键菜单（可选）：
oncontextmenu="return false" - 安卓部分浏览器（如 Chrome）可能忽略
playsinline，但加了无害；微信 WebView 对该属性支持良好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
