iOS上playsinline不起作用的根本原因是WebKit强制要求同时满足三个条件：HTML中存在playsinline和webkit-playsinline属性、视频播放必须由用户手势（如click或touchstart）触发，且父容器不能含transform等禁用渲染属性。
playsinline 属性在 iOS 上为什么不起作用
直接加 playsinline 属性但视频仍全屏播放，根本原因不是属性没写对，而是 iOS 的 WebKit 强制要求同时满足三个条件：属性存在、webkit-playsinline 兼容属性存在、且视频必须由用户手势触发播放。缺一不可。
-
playsinline是 HTML5 标准属性，iOS 10+ 支持，但仅作“允许”而非“强制”内联 -
webkit-playsinline是 Safari 旧版必需的 vendor prefix，iOS 14 之前不加它，playsinline形同虚设 - 自动播放（比如页面加载后
video.play()）会被 iOS 静音拦截，且默认退回到全屏——哪怕属性全对也没用
必须写的 HTML 和初始状态设置
光写 <video playsinline webkit-playsinline> 不够，元素本身和父容器也得配合。iOS 对内联播放有渲染层限制，常见失败是因为视频被包裹在 position: fixed 或 transform 变换的容器里。
- 视频父容器不能有
transform、perspective或will-change，否则 WebKit 会禁用内联播放能力 - 视频自身不能设
width: 100vw或height: 100vh（尤其在 body 滚动时），容易触发 Safari 的“疑似全屏意图”判定 - 推荐初始尺寸用具体像素值或
max-width: 100%+height: auto，避免布局抖动干扰播放逻辑
<video src="video.mp4" playsinline webkit-playsinline muted controls style="width: 100%; height: auto;" ></video>
播放必须由用户点击触发
即使所有属性和样式都对，如果用 video.play() 在页面 load 后自动调用，iOS 仍会忽略 playsinline 并强制全屏。唯一可靠路径是绑定显式用户交互事件。
- 只能响应
click、touchstart（注意：touchend有 300ms 延迟风险，不推荐） - 不能在
setTimeout或异步回调里调用play()，哪怕延迟 1ms，WebKit 就认为脱离用户上下文 - 如果视频需要静音播放（绕过 iOS 自动播放限制），务必先设
muted属性，再调play()；否则会抛NotAllowedError
const video = document.querySelector('video');
document.querySelector('#play-btn').addEventListener('click', () => {
video.play().catch(e => console.error('Play failed:', e));
});
小窗播放（PiP）和内联播放是两回事
很多人混淆 playsinline 和 PiP（Picture-in-Picture）。前者只是让视频在页面内播放，后者才是系统级悬浮窗。iOS 上 PiP 需额外配置且仅支持部分场景。
立即学习“前端免费学习笔记（深入）”；
- PiP 在 Safari 中需同时满足：
playsinline+webkit-playsinline+controls+ 用户点击控制条的 PiP 按钮（或代码调用video.webkitSetPresentationMode('picture-in-picture')） - 纯 JS 触发 PiP 有严格限制：必须在用户手势回调中调用，且视频已处于播放状态（
readyState >= 3） - 如果目标是“小窗”，优先确认是否真需要 PiP——多数业务场景只需内联播放，PiP 反而增加兼容性负担
真正难的不是加属性，是让整个播放链路不触发 iOS 的任何一条降级规则：从 DOM 结构、CSS 渲染、事件时机到媒体状态，任意一环松动，playsinline 就形同虚设。
