playsinline是ios safari和微信ios实现内联播放的硬性门槛，必须与webkit-playsinline、muted共存，且需用户手势触发play()、避免transform等css干扰，否则仍会全屏。
在移动端嵌入 HTML5 视频时，playsinline 是绕不开的关键属性——它不是“锦上添花”，而是 iOS Safari 和微信 iOS 客户端实现内联播放的硬性门槛。只加这个属性远远不够，必须配合静音、兼容写法和合理触发方式，否则点击后依然会跳转全屏、中断页面体验。
为什么必须加 playsinline？
iOS Safari 默认把 <video></video> 当作系统级播放器处理：只要用户点一下播放，立刻全屏、脱离 DOM 流、遮挡页面内容。这种行为对 Banner 视频、弹窗短视频、背景循环视频等场景非常不友好。playsinline 的作用就是明确告诉浏览器：“请在这个 <video></video> 标签原本的位置里播放，别动我的布局。”
- 它是布尔属性，直接写
playsinline即可，playsinline="true"是无效写法 - 仅对 iOS 10+、微信 iOS 7.0.5+、部分安卓 WebView（如 QQ、UC）生效
- Android Chrome 等现代浏览器默认支持内联，但加上仍可统一行为、避免低版本波动
光写 playsinline 不行，这三样必须一起上
实测中，单独加 playsinline 在 iOS 上大概率失效。真正起效需要三者共存：
- playsinline：标准 HTML5 属性，声明内联意图
- webkit-playsinline：WebKit 旧版兼容必需项（iOS 9–10 仍有不少存量用户）
- muted：iOS 强制要求——无论自动播放还是手动触发，只要没静音，就拒绝内联启动
推荐完整写法：
常见失效原因与快速排查
即使三属性齐全，仍可能强制全屏。重点检查以下几项：
- 是否在非用户手势上下文中调用
play()？比如放在setTimeout、API 回调或load事件里——Safari 会拦截，应改用canplaythrough后触发 - 父容器是否用了
transform（如translateZ(0)）或overflow: hidden？这两者会破坏内联渲染层，需移除或换用clip-path替代 - 是否遗漏
<meta name="viewport">声明？没有它，iOS 可能降级为兼容模式，影响属性识别 - 微信安卓版虽通常默认内联，但若用了 X5 内核，还需额外加
x5-playsinline和x5-video-player-type="h5-page"
配合 CSS 实现真正沉浸式嵌入
属性只是基础，视觉融合才是用户体验关键：
- 用
position: fixed; top: 0; width: 100vw; height: 100vh; object-fit: cover;让视频铺满视口，不拉伸不变形 - 设置
poster属性提供首帧图，避免加载空白或黑屏等待 - 如需内容覆盖视频，可用
z-index: 1；如作背景，则设z-index: -1并配合position: relative容器 - 避免给
<video></video>设width: 100%却不配height: auto，易导致布局抖动；推荐用max-width: 100%; height: auto;或固定宽高比容器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
