ios的video总是一点就全屏，是因为safari强制全屏策略：未声明playsinline和webkit-playsinline、未配muted、未由用户手势触发播放时，均会fallback至全屏。
为什么iOS的<video></video>总是一点就全屏
iOS Safari 对 <video></video> 标签有强制全屏策略：只要没显式声明 playsinline，且视频有音频轨道（哪怕静音），点击播放就会跳转全屏。这不是 bug，是 Apple 的设计限制，目的是防止网页内嵌视频干扰移动端浏览体验。
关键判断：如果你的视频不需要音频、也不需要用户交互控制，最稳妥的方式是移除 audio 轨道（比如用 FFmpeg 去音）；但多数场景下得保留音轨，那就必须靠 HTML 属性 + JS 配合绕过限制。
- 必须加
playsinline和webkit-playsinline—— 缺一不可，后者是旧版 iOS 的兼容写法 -
controls属性不是必须的，但若开启，iOS 会默认隐藏原生控件（除非同时设controlslist="nodownload"等） - 不能依赖
autoplay+muted绕过——iOS 10+ 要求用户手势触发后才能播放，即使静音
HTML 中正确写法：属性缺一不可
只写 playsinline 不够，iOS 12–14.8 仍可能忽略它。必须同时带上 WebKit 私有属性，并确保没有冲突设置（比如 disablepictureinpicture 在某些版本会意外触发全屏）。
<video src="demo.mp4" playsinline webkit-playsinline muted loop poster="poster.jpg"></video>
-
playsinline是标准属性，iOS 10+ 支持 -
webkit-playsinline是 Safari 旧版必需项，iOS 9–12 必须存在 -
muted不仅为了静音，更是 iOS 允许自动播放的前提（即使你后续用 JS 解除静音） - 避免写
x5-playsinline或x5-video-player-type="h5"—— 这些是安卓微信私有属性，iOS 无视且可能干扰
JS 初始化时必须触发一次用户手势
iOS 要求首次播放必须由用户真实点击/触摸触发。哪怕你加了 muted 和 autoplay，没手势调用 play() 就会报错：NotAllowedError: The request is not allowed by the user agent or the platform in the current context.
- 不能在
DOMContentLoaded或load事件里直接video.play() - 必须绑定到按钮点击、触摸开始等明确用户动作上，例如：
document.getElementById('playBtn').addEventListener('click', () => { video.play().catch(e => console.warn('Autoplay prevented:', e)); }); - 如果想“伪自动播放”，可在页面加载后显示一个透明遮罩层，引导用户轻点一下——这点击就是合法手势
- 注意：
play()返回 Promise，务必用catch捕获拒绝，否则控制台报错且中断后续逻辑
真机测试时容易忽略的细节
模拟器或桌面 Safari 开发工具无法复现该问题，必须用真实 iOS 设备（尤其是 iOS 16+）测试。常见漏点：
- 服务器未正确配置 MP4 的
Content-Type为video/mp4—— 导致 iOS 拒绝加载，进而 fallback 到全屏播放器 - 视频编码格式不兼容：iOS 仅支持 H.264 + AAC，AV1 或 VP9 视频即使加了
playsinline也会降级到全屏原生播放器 - 父容器设置了
transform或will-change—— 某些 iOS 版本下会导致 inline 播放失效 - 使用
object-fit: cover时，若容器宽高比与视频不一致，iOS 可能误判为“需要全屏适配”而强制跳转
最保险的做法：用 Safari 的「开发 → 当前页检查器」看实际渲染的 <video></video> 元素是否真的启用了 inline 模式——如果右键菜单里还有「进入全屏」选项，说明 playsinline 未生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
