playsinline属性用于视频内联播放,避免移动设备自动全屏;添加playsinline和webkit-playsinline可提升兼容性,适用于短视频嵌入等场景,需注意安卓厂商实现差异及autoplay时需静音。

在HTML中,playsinline 是一个用于 标签的布尔属性,主要作用是**让视频在移动设备上以内联方式播放,而不是全屏播放**。
playsinline 属性的作用
在一些移动浏览器(尤其是iOS Safari)中,默认情况下视频会自动进入全屏模式播放。这在某些场景下会影响用户体验,比如在网页中嵌入小视频、弹窗视频或需要用户持续浏览页面内容时。playsinline 可以告诉浏览器:视频应该在页面布局中正常播放,不强制全屏。
添加该属性后,视频将:
- 在iOS Safari等浏览器中避免自动全屏
- 保持在网页容器内播放(即“内联播放”)
- 提升移动端网页的交互体验
如何使用 playsinline 属性
使用方法非常简单,只需在 标签中加入 playsinline 即可:
立即学习“前端免费学习笔记(深入)”;
名扬银河企业建站系统,适用于无代码基础的新手,快速搭建企业网站,程序内置了多项实用功能及插件,能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息,管理企业产品,自定义产品封面图,产品详情图、文、视频,产品扩展属性自定义等。2、案例管理系统发布企业成功案例,管理成功案例,自定义案例封面图,案例详情图、文、视频,案例扩展属性自定义等。3、资讯管理系统发布企
注意:为了确保兼容性,有时还需同时添加 webkit-playsinline 属性(针对旧版Safari):
适用场景与注意事项
适用场景:
- 社交媒体中的短视频展示
- 产品介绍页中的嵌入式演示视频
- 需要用户边看视频边操作页面的交互设计
注意事项:
- 部分安卓浏览器可能忽略此属性,行为取决于厂商实现
- 自动播放(autoplay)配合 playsinline 使用时,通常需要设置 muted 属性才能生效
- iOS 10+ 开始支持 playsinline,低版本仍可能全屏播放









