ios safari及微信/qq webview需同时设置playsinline和webkit-playsinline才能启用内联播放，缺一不可；自动播放还需muted，用户点击后方可取消静音；x5内核需额外添加x5-video-player-type等私有属性。
为什么只加 playsinline 还是强制全屏
iOS Safari（包括微信、QQ 等基于 WebKit 的 WebView）必须同时看到 playsinline 和 webkit-playsinline 才认这个“内联播放请求”。只写一个，旧版 iOS（如 12–14）大概率忽略，新版也可能 fallback 到全屏。这不是浏览器 bug，而是 Apple 对内联播放的双保险机制。
常见错误现象：Uncaught (in promise) NotSupportedError: play() failed because the user didn't interact with the document first，或者点击后直接跳转横屏全屏界面，页面布局瞬间丢失。
-
playsinline是 HTML5 标准属性，iOS 10+ 支持 -
webkit-playsinline是 vendor prefix，iOS 9–14 兼容必需 - 二者都必须写在同一个
<video></video>标签上，且不能赋值（playsinline="true"无效） - Vue/React 中动态绑定时，确保是 DOM 属性而非组件 prop；例如 Vue 要用
v-bind:playsinline或直接写死
自动播放 + 内联播放必须静音，但用户想听声音怎么办
iOS 要求：只要走 autoplay，就必须 muted + playsinline + webkit-playsinline 三者共存，缺一不可。不静音，play() 会被 Promise reject，视频根本播不起来。
如果业务需要用户点击后播放带声视频，推荐分两步：
- 初始状态设为
muted autoplay playsinline webkit-playsinline，让视频静音内联启动 - 在用户真实点击按钮（或
video的click事件）回调里，执行video.muted = false - 切勿在
loadedmetadata、canplay或setTimeout里尝试取消静音——这些不是用户手势上下文，iOS 会拦截
微信和 QQ 内置浏览器要额外补私有属性
微信 iOS 客户端、QQ 浏览器等 X5 内核环境，不认纯标准属性，容易 fallback 到自家全屏播放器。光靠 playsinline 和 webkit-playsinline 不够。
关键补充项：
-
x5-video-player-type="h5-page"：告诉 X5 内核“请用 H5 页面模式播放”，漏掉它基本白搭 -
x5-video-orientation="portrait"：防横屏劫持，尤其在竖屏页中避免意外旋转 -
x-webkit-airplay="allow"：避免因 AirPlay 权限缺失导致的意外全屏 fallback - 不要写
controls="false"——布尔属性写成字符串值会让控件照常显示；应直接省略controls或用 CSS 隐藏
最小可用示例：
<video src="clip.mp4" muted autoplay loop playsinline webkit-playsinline x5-video-player-type="h5-page" x5-video-orientation="portrait" x-webkit-airplay="allow"></video>
JS 动态插入或切换视频源时容易失效
用 JS 创建 <video></video> 或通过 src 切换视频时，iOS 不会自动重读 playsinline 等属性——它只在元素首次解析时检查一次。
必须手动触发重新加载流程：
- 设置新
src后，立刻调用video.load() - 再调用
video.play()，且必须在用户手势上下文中（比如按钮onclick里） - 避免把
<video></video>插入到display: none或opacity: 0的容器里——微信要求视频在首屏可视区域内 - 父容器若含
transform或perspective，某些 iOS 版本会强制退回到全屏模式
object-fit 和宽高控制也得同步处理：仅靠 width: 100% 不行，必须加 object-fit: cover 或 contain，否则画面拉伸或黑边，iOS 渲染会更不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
