通过 HTML 的 video 标签的 playsinline 属性，可以实现视频在移动端（如 iOS）的内联播放，而不是全屏播放。以下是具体用法和示例：✅ 语法playsinline 是一个布尔属性，设置后表示视频应以内联方式播放（即不进入全屏模式）。在 iOS 上，如果不加这个属性，视频默认会以全屏

想让视频在iOS设备上摆脱强制全屏、实现优雅的内联播放？关键就在`playsinline`和`webkit-playsinline`这对“双保险”属性——它们专为iOS Safari及微信、抖音等WebKit内核浏览器而生，配合`muted`才能解锁自动播放，任何一环缺失都会悄然退回到恼人的全屏模式；Android和其他现代浏览器则默认支持内联，无需额外配置。掌握这组属性的正确用法、常见陷阱（如动态渲染遗漏前缀、父容器transform干扰、静音时机不当）以及微信等平台的特殊限制，是打造跨端一致视频体验的核心突破口。

为什么 playsinline 在 iOS 上才关键

这个属性几乎只对 iOS Safari 和基于 WebKit 的 WebView（比如微信内置浏览器、iOS 版抖音内嵌页）起作用。Android Chrome、Firefox、Edge 等现代桌面/移动浏览器默认就支持内联播放，加不加 playsinline 都没区别。真正卡住你的是 iOS——不加它， 一触发播放就会全屏跳转。

playsinline 必须和 webkit-playsinline 一起用

iOS Safari 要求双保险：HTML 属性 + 对应的 vendor 前缀。只写 playsinline 不生效是常见错误。

正确写法是：

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

注意：webkit-playsinline 是布尔属性，不需要赋值（不要写成 webkit-playsinline="true"），否则部分旧版 iOS 可能忽略。

容易踩的坑包括：

• 漏掉 webkit-playsinline，尤其在用 Vue/React 动态渲染时，容易只绑定 playsinline
• 视频未设置 controls 或 muted，导致 iOS 拒绝自动播放（即使有 playsinline）
• 父容器设置了 transform 或 perspective，某些 iOS 版本会强制退回到全屏模式

自动播放 + 内联播放必须静音

iOS 要求：只要想自动播放（autoplay），就必须同时满足 muted + playsinline + webkit-playsinline。三者缺一不可。

示例：

<video autoplay muted playsinline webkit-playsinline src="loop.mp4"></video>

如果你需要用户点击后播放带声音的视频，可以这样处理：

• 初始状态设为 muted + playsinline，先内联播起来
• 在 play 事件回调里调用 video.muted = false（注意：部分 iOS 版本要求此操作在用户手势上下文中，比如 onclick 里）
• 避免在 loadedmetadata 或定时器中尝试取消静音，大概率被浏览器拦截

微信和 QQ 内置浏览器的额外限制

它们基于 iOS WebView，但会进一步限制自动播放行为。即使加了所有属性，仍可能被拦截。可靠做法是：

• 确保 在首屏可视区域内（不在 display: none 或 opacity: 0 容器里）
• 避免用 JS 动态插入 标签后再调 play()；最好 HTML 直出，或至少等 DOMContentLoaded 后再插入
• 微信 8.0.30+ 开始支持 x5-video-player-type="h5"（仅安卓有效），iOS 侧无对应替代方案，别白费劲

最稳妥的路径还是：用户显式点击 → 触发 play() → 再立刻 unmute（如果需要声音）。

内联播放不是开关，而是一整套 iOS 行为契约；漏掉任意一环，它就退回全屏——而且往往不报错，只默默失效。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~