playsinline="true"在iOS上无效，因HTML5规范将其定义为布尔属性，仅存在即启用；正确写法为playsinline或playsinline=""，且须配合muted、autoplay、loop、controls="false"及X5私有属性才能实现内联播放。
playsinline="true" 是错的写法，直接导致属性失效。iOS Safari 和微信 WebView 只认布尔属性 playsinline（无值）或 playsinline=""，加等号和字符串值会被忽略。
为什么playsinline="true"在 iOS 上完全不生效
HTML5 规范中 playsinline 是布尔属性（boolean attribute），它的存在即表示“启用”，不存在即“禁用”。浏览器解析时只检测该属性是否出现在标签中，不读取其值。写成 playsinline="true" 后，Safari 会把它当做一个带值的自定义属性处理，从而跳过内联播放逻辑判断。
常见错误现象：
- 视频点击后仍强制全屏，控制台无报错，但行为与没加该属性一致
- Vue/React 中用
v-bind:playsinline="true"或:playsinline="true"动态绑定，结果渲染出错的 HTML 属性
正确写法只有两种：
<video playsinline></video><video playsinline=""></video>
只加playsinline远远不够：必须共存的 4 个关键属性
单独写 playsinline 在 iOS Safari 上几乎等于没写——它只是“申请许可”，真正能否内联播放，取决于是否同时满足以下条件：
-
muted：iOS 强制要求自动播放必须静音；有声视频首次播放必须由用户手势触发，否则play()被静默拒绝 -
autoplay：若需页面加载即播，必须显式声明；微信部分版本会拦截无交互的autoplay，建议配合loadeddata事件再调play() -
loop：iOS 16+ 对非循环视频更倾向 fallback 全屏；加loop能显著提升稳定性，尤其对短背景视频 -
controls="false"：不能只靠 CSS 隐藏；必须显式声明并配合display: none，否则某些机型点击区域仍会触发全屏
漏掉任意一个，都可能导致“看似写了 playsinline，但点开还是全屏”。
微信和 X5 内核浏览器必须补的私有属性
微信 iOS 客户端、QQ 浏览器、夸克等基于 X5 内核的环境，根本不认标准 playsinline，只响应自家属性：
-
x5-video-player-type="h5-page"：最关键的一条，漏掉基本必全屏 -
x5-video-orientation="portrait"：防横屏劫持，避免用户旋转手机时被强制切全屏 -
x5-playsinline="true"：X5 内核专属布尔属性，建议保留（注意：这里才允许写"true"） -
webkit-playsinline：iOS Safari 旧版本兼容必需，iOS 10+ 已支持标准属性，但 12~14 设备仍有 fallback 风险
完整最小可用示例：
<video src="clip.mp4" muted autoplay loop playsinline webkit-playsinline x5-video-player-type="h5-page" x5-video-orientation="portrait" x5-playsinline="true" x-webkit-airplay="allow" controls="false"></video>
JS 动态设置 src 后容易忽略的三件事
在 Vue/React 中通过 ref 拿到 <video></video> 元素后动态赋值 src，是高频失败场景：
- 没调
video.load()：iOS 不会重新解析新src的媒体元数据，playsinline等属性不被二次识别 - 在
onMounted/useEffect里直接video.play()：iOS 拦截无用户手势的播放请求，返回NotAllowedError（但常被静默吞掉） - CSS 干扰未排查：父容器含
transform、overflow: hidden或object-fit: cover但宽高比失配，Safari 会判定“布局异常”而强制全屏
真正可靠的触发方式是监听 loadeddata 或 canplay，并在用户 click/touchend 后调用 play() —— 即使你已设 muted 和 autoplay，这点在微信中尤其关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
