playsinline必须与webkit-playsinline同时存在且为布尔属性，缺一不可；还需硬编码muted属性、用户手势触发播放，并在微信中额外添加x5-playsinline等x5专属配置。
playsinline 必须和 webkit-playsinline 一起写
单独加 playsinline 在 iOS Safari（尤其是 iOS 12–14.8）上大概率被忽略。这不是可选搭配，而是硬性兼容要求：webkit-playsinline 是旧版 WebKit 内核唯一认的属性，playsinline 是 HTML5 标准属性，两者必须同时存在，缺一不可。
常见错误包括：
-
playinline（少一个s）拼写错误 -
playsinline="true"或webkit-playsinline="true"—— 这是无效写法，布尔属性不能赋值 - 只在 JS 中用
setAttribute('playsinline', '')动态添加 —— iOS 只在初始 HTML 解析时读取该属性
正确写法只有两种：<video playsinline webkit-playsinline></video> 或 <video playsinline="" webkit-playsinline=""></video>
muted 是强制前提，不是可选项
iOS 不允许任何有音频轨道的视频在无用户手势下内联播放，哪怕你没开声音、也没设 autoplay。只要视频文件本身带音频轨（哪怕静音），playsinline 就不会被“受理”。
所以必须显式加上 muted 属性：
- 不写
muted→ 点击后仍跳全屏，控制台无报错，行为像没加playsinline -
muted=false或muted="false"无效，必须是muted（无值）或muted="" - 若需后续解除静音，得先让用户点击一次（比如自定义按钮），再调
video.muted = false，否则 Safari 会阻断
微信 WebView 需要额外加 X5 专属属性
微信 iOS 客户端用的是腾讯 X5 内核，它不完全遵循标准 WebKit 行为。playsinline 和 webkit-playsinline 对它作用有限，必须叠加 X5 私有属性才能生效。
关键配置如下：
-
x5-video-player-type="h5-page"：声明使用 H5 页面内联播放器（不是微信原生全屏播放器） -
x5-playsinline="true"：安卓微信只认这个，iOS 微信也建议加上 - 避免
x5-video-player-type="h5"用于 m3u8 直播流 —— 这反而会触发强制全屏 - 如果父容器用了
transform、will-change或overflow: hidden，X5 内核可能直接无视所有 inline 属性
HTML 硬编码 + 用户手势，缺一不可
所有属性必须出现在初始 HTML 字符串里，JS 动态插入或框架 render 后补属性都无效。React 中 playsInline（PascalCase）会被转成小写，但前提是它在首次挂载时就存在；Vue 中 v-bind:playsinline="true" 若绑定值为 false，属性根本不会输出到 DOM。
另外，即使属性全对，JS 调用 .play() 仍可能跳全屏，原因通常是：
- 监听了
window.onload或DOMContentLoaded→ Safari 不认为这是用户激活上下文 - 事件绑在
document上，实际点击的是非交互元素（如span包裹的按钮） - 用了
setTimeout延迟播放，导致脱离手势事件栈 - 在
touchend后立刻play()，部分机型因防误触机制拒绝执行
稳妥做法：用 click 或 touchstart 绑定到明确可交互元素（如 button），并在回调里直接调 video.play()。
最易被忽略的一点：视频资源本身是否被 Safari 正确加载。type 属性写错（比如 type="video/webm" 指向 .mp4 文件）、服务端没返回 Content-Type: video/mp4、编码不是 H.264 + AAC —— 这些都会让 video 元素变成空载，此时所有属性都形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
