playsinline 是一个布尔属性，用于让视频在页面内播放而非强制全屏，但需同时满足 muted、autoplay、webkit-playsinline 才能稳定生效，尤其在 iOS Safari 中缺一不可。
在移动端网页中，<video> 标签默认会在全屏模式下播放（尤其在 iOS Safari 中），而 playsinline 属性就是用来让视频**不自动全屏、保持在页面内正常播放**的关键属性。
playsinline 是什么？
这是一个布尔属性，作用是告诉浏览器：视频应在当前容器内播放，而非强制唤起全屏播放器。它对 iOS Safari（尤其是 iOS 10+）最为关键，Android 浏览器部分支持（Chrome 通常默认行内播放，但显式声明仍推荐）。
注意：仅加 playsinline 不够，还需配合其他属性才能稳定生效。
必须搭配的几个关键属性
单独写 playsinline 很可能无效。以下属性需**同时存在**：
立即学习“前端免费学习笔记（深入）”；
- autoplay：iOS 要求自动播放时必须静音，否则会被拦截；
- muted：必须静音，这是 iOS 强制要求（有声音的 autoplay 默认被禁）；
-
webkit-playsinline（旧版 iOS 兼容）：虽然 iOS 10+ 已支持标准
playsinline，但保留该属性可兼容更老版本； - controls（可选）：是否显示控制栏，不影响行内播放逻辑，但建议根据场景开启或关闭。
正确写法示例
一个兼容性较好的移动端行内视频标签如下：
<video src="example.mp4" playsinline webkit-playsinline autoplay muted loop controls> </video>
如果使用 poster（封面图）、preload 或自定义样式，也可一并添加：
<video src="video.mp4" poster="cover.jpg" playsinline webkit-playsinline autoplay muted loop preload="metadata" style="width: 100%; height: auto;"> </video>
常见失效原因和排查建议
如果加了 playsinline 仍跳全屏，检查以下几点：
- 是否遗漏
muted或autoplay—— iOS 下二者缺一不可； - 是否在非用户手势触发的 JS 中调用
play()—— 静音自动播放只允许在页面加载时或用户点击后立即调用； - 是否用了
playsinline="false"这类错误写法 —— 它是布尔属性，只需存在即为 true，不要赋值； - 是否在微信内置浏览器中测试 —— 微信 iOS 版曾长期屏蔽
playsinline，现新版已基本支持，但仍建议加webkit-playsinline并确保静音； - 是否视频格式/编码不被支持 —— 确保 MP4 使用 H.264 编码，音频为 AAC。
