playsinline 在 ios 上才关键，因 safari 和微信 webview 强制全屏播放，需配合 muted、autoplay 及 webkit-playsinline 才生效，且必须硬编码在 html 中、不能 js 动态添加。
为什么 playsinline 在 iOS 上才关键？
安卓大部分浏览器默认就支持内联播放，iOS 的 Safari 和微信 WebView 却强制视频全屏——这不是 bug，是 Apple 的策略性限制。只有加了 playsinline，再配合其他约束条件，iOS 才可能允许视频在页面内播放。
但光加这个属性没用：它只是“申请”，不是“许可”。实际是否生效，取决于视频是否满足自动播放策略（比如静音、用户手势触发等）。
-
playsinline必须写在<video></video>标签里，不能靠 JS 动态添加（iOS 不认） - 必须同时设置
muted，否则 iOS 会忽略playsinline - 如果视频有声音且未被用户点击/触摸触发，iOS 仍会跳转全屏（哪怕写了
playsinline）
playsinline 配合哪些属性才真正生效？
单独写 playsinline 几乎等于没写。它需要和至少两个属性共存才能被 iOS 尊重：
-
muted：必须存在，且值为true或无值（<video muted></video>即可） -
autoplay：若想自动播放，必须静音；否则需用户交互后调用.play() - （可选但推荐）
webkit-playsinline：旧版 iOS（如 iOS 9–10）需要这个私有属性，现在新版本已兼容playsinline，但保留更稳妥
正确写法示例：
<video controls playsinline webkit-playsinline muted autoplay><source src="demo.mp4" type="video/mp4"></source></video>
微信 WebView 中 playsinline 失效的常见原因
微信内置浏览器基于 iOS WebKit，但加了一层拦截逻辑——它会主动移除或忽略某些属性，尤其当视频未设宽高、或父容器有 transform、overflow: hidden 等样式时。
- 确保
<video></video>有明确的width和height（哪怕是width="100%"+height="200px"） - 避免父级元素使用
transform: translateZ(0)或will-change: transform，这些会触发微信的“非标准渲染层”，导致playsinline被无视 - 微信 8.0.30+ 对
playsinline支持更好，但若用background-video类型（如 poster + 自定义播放按钮），仍需手动绑定touchstart触发.play()，不能只依赖autoplay
JS 动态控制时为什么 playsinline 不起作用？
因为 iOS 只在解析 HTML 时读取 playsinline 属性。用 JS 给 video 元素 setAttribute('playsinline', '') 是无效的——DOM 已挂载，WebKit 不重新评估播放策略。
- 必须在初始 HTML 中硬编码
playsinline，哪怕你后续用 JS 控制播放 - 如果视频是异步插入（如 AJAX 加载后 append 到 DOM），请确保插入的字符串包含该属性：
el.innerHTML = '<video playsinline muted>...</video>' - React/Vue 等框架中，要写成
<video playsinline muted></video>（注意 React 的 prop 命名规范），而不是playsinline字符串
最易被忽略的一点：即使所有属性都对了，如果页面加载时视频资源还没 ready，iOS 可能先按默认策略全屏打开一次，之后才响应内联设置。所以建议加 preload="auto" 并监听 canplaythrough 再做 UI 启用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
