配置HTML5视频行内播放属性Playsinline的方法

作者：袖梨 2026-06-17
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 仍建议保留以统一行为

相关文章

精彩推荐