iOS Safari 内联播放需同时满足：① HTML 中设置 playsinline 和 webkit-playsinline；② 视频 muted 或由用户手势触发播放；③ 避免 transform 等 CSS 变形；④ 微信 WebView 还需 x5-playsinline 且 video 不能嵌套过深。

video 标签加 playsinline 为什么在 iOS 上有时没用

因为 iOS Safari 要求 playsinline 必须配合 webkit-playsinline 和正确的播放触发方式，否则仍会强制全屏。仅写 playsinline 不足以生效。

• 必须同时设置 webkit-playsinline 属性（iOS 10+ 兼容必需）
• 视频需为 muted 或用户手势触发播放（如点击按钮调用 play()），否则 iOS 拒绝内联播放
• autoplay 在无静音状态下会被 Safari 阻止，即使有 playsinline 也无效
• 确保 video 元素未被 transform、scale 等 CSS 变形影响，某些缩放会导致 Safari 回退到全屏逻辑

如何正确配置 HTML video 实现内联播放

关键不是只加一个属性，而是组合满足 Safari 的内联播放策略。以下是最小可靠写法：

<video 
  controls 
  muted 
  playsinline 
  webkit-playsinline
  src="example.mp4">
</video>

• muted 是硬性前提——iOS 不允许自动播放带声音的内联视频
• controls 建议保留，否则用户无法手动解除静音（解除后仍可内联）
• 若需默认播放，用 JS 在用户点击后调用 play()，并确保此时已 muted
• 避免在 load 或 DOMContentLoaded 中直接 play()，必须由用户手势事件（如 click、touchstart）触发

JS 主动播放时 playsinline 失效的常见原因

即使 HTML 属性齐全，JS 调用 play() 后仍跳全屏，大概率是播放上下文不满足“用户激活”要求。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 监听的是 document 或非直接交互元素的事件（如 window.onload），Safari 不认作有效手势
• 事件委托链过长，原始事件 target 不是可交互元素（如 button 内嵌 span 触发 click）
• 使用了 setTimeout 延迟 play()，导致脱离手势事件执行栈
• 在 touchend 后立刻 play() 可能因防误触机制失效，改用 click 更稳妥

iOS 微信 WebView 中 playsinline 的特殊限制

微信内置浏览器（WKWebView）沿用 Safari 内核但额外封禁部分行为，playsinline 容易被忽略。

立即学习“前端免费学习笔记（深入）”；

• 必须在 body 直接子级或接近顶层的 video 元素上设置属性，嵌套过深（如多层 div 包裹）可能失效
• 微信 8.0.32+ 开始支持 x5-playsinline（腾讯 X5 内核专用），可叠加使用：x5-playsinline="true"
• 禁止使用 object-fit: cover + width: 100% 这类拉伸组合，X5 内核会判定为“非标准容器”而降级全屏
• 实测发现：微信中首次播放必须用户点击触发，且不能在 iframe 里播放 video

实际项目里最常卡住的点不是属性漏写，而是播放时机和容器结构不符合平台隐式规则。iOS 和微信对“用户意图”的判断比文档写的更严，得按它们的脾气来适配。