最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
配置HTML5视频行内播放属性Playsinline的方法
时间：2026-06-17 09:53:52 编辑：袖梨 来源：一聚教程网
iOS Safari和微信内置浏览器中视频行内播放需同时设置playsinline、webkit-playsinline和muted属性，并确保viewport声明及避免transform/overflow:hidden干扰。
在 iOS Safari 和部分微信内置浏览器中，HTML5 视频默认会全屏播放，若想让视频在页面内（即“行内”）播放，必须正确配置 playsinline 属性，并配合其他必要属性。
基础写法：添加 playsinline 属性
只需在 <video> 标签中加入 playsinline（布尔属性，无需赋值）即可启用行内播放：
<video src="example.mp4" controls playsinline></video>
注意：该属性仅对 iOS 10+ 及部分 Android 浏览器生效，且需满足后续条件才真正起作用。
立即学习“前端免费学习笔记（深入）”；
必须同时设置的配套属性
仅加 playsinline 不够，iOS Safari 要求视频还满足以下至少一项条件：
-
设置
muted属性（静音）：适用于自动播放场景，如 banner 视频、背景视频 -
用户主动触发播放（如点击按钮调用
play()），且未使用autoplay -
设置
webkit-playsinline（旧版 iOS 兼容写法，建议保留）
推荐完整写法示例：
<video src="video.mp4" controls playsinline webkit-playsinline muted></video>
自动播放 + 行内播放的常见组合
若需页面加载后自动行内播放（如 H5 宣传页），关键点如下：
- 必须加
muted（iOS 强制要求） - 建议加
autoplay，但注意部分微信版本可能拦截无交互的 autoplay - 可监听
canplay或loadeddata后调用play()提升兼容性 - 避免依赖
load事件，它不保证媒体已就绪
微信内置浏览器特别说明
微信 iOS 版基于 WKWebView，支持 playsinline，但部分旧版本（如 7.0.5 之前）需额外配置：
- 确保页面
<head>中有 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免父容器设置
transform或overflow: hidden，可能干扰内联渲染 - 微信安卓版通常默认行内播放，但加
playsinline仍建议保留以统一行为