iOS和安卓微信内联播放需手动添加playsinline、webkit-playsinline及x5-playsinline="true"属性,且须静音、用户手势触发,否则强制全屏。

不会自动添加,必须手动写在 <video> 标签里,否则 iOS 微信强制全屏——这是 Apple 的策略,不是 bug,也不是微信的“遗漏”。
为什么 playsinline 必须显式声明
iOS Safari(包括微信内置浏览器)从 iOS 10 起才支持内联播放,且只响应明确设置的 playsinline 和 webkit-playsinline 属性。系统不会替你补全、猜测或降级 fallback。
- 没写
playsinline→ 视频一定全屏,哪怕页面是竖屏、视频尺寸很小 - 只写
webkit-playsinline(不加标准属性)→ iOS 12+ 可能失效,部分微信版本会忽略 - 写了但没生效 → 大概率是标签没渲染完成就调用了
play(),或视频未处于视口可见区域
安卓微信需要额外加 x5-playsinline
安卓微信用的是腾讯 X5 内核,它不认标准的 playsinline,必须显式加上 x5-playsinline="true" 才能开启内联模式。
- 只加
playsinline在安卓微信中基本无效 - 推荐写法:
<video playsinline webkit-playsinline x5-playsinline="true"> - 注意:X5 内核下
x5-playsinline是字符串属性,值写"true"或空字符串都行,但不能省略
常见失效场景和绕过方式
即使属性全写了,仍可能被拦截,原因多与播放触发时机有关:
- 页面加载完立即
play()→ iOS/微信都会拒绝,必须由用户真实交互(如touchstart、click)触发 - 用了 Video.js 等封装库 → 检查其初始化配置是否透传了
playsinline: true,老版本(如 v7.10 之前)默认不透传 - 视频带声音且没
muted→ iOS 自动播放策略会直接拒掉,静音是内联自动播放的硬性前提 - 页面被切到后台再切回 → 需监听
visibilitychange并重试play(),否则可能卡住
最稳妥的做法是:属性写全 + 静音 + 用户手势触发播放 + 失败后降级显示自定义按钮。别指望“写了就自动好”,微信 H5 视频的播放链路本质上是一连串策略校验,漏掉任一环都会断掉。


















