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

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

2026-05-12 08:27:39 0浏览收藏

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

怎么通过HTML的video标签的playsinline属性实现内联播放

为什么 `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 或定时器中尝试取消静音，大概率被浏览器拦截