iOS Safari和微信内置浏览器中视频行内播放需同时设置playsinline、webkit-playsinline和muted属性，并确保viewport声明及避免transform/overflow:hidden干扰。

在 iOS Safari 和部分微信内置浏览器中，HTML5 视频默认会全屏播放，若想让视频在页面内（即“行内”）播放，必须正确配置 playsinline 属性，并配合其他必要属性。

基础写法：添加 playsinline 属性

只需在 标签中加入 playsinline（布尔属性，无需赋值）即可启用行内播放：

注意：该属性仅对 iOS 10+ 及部分 Android 浏览器生效，且需满足后续条件才真正起作用。

必须同时设置的配套属性

仅加 playsinline 不够，iOS Safari 要求视频还满足以下至少一项条件：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 设置 muted 属性（静音）：适用于自动播放场景，如 banner 视频、背景视频
• 用户主动触发播放（如点击按钮调用 play()），且未使用 autoplay
• 设置 webkit-playsinline（旧版 iOS 兼容写法，建议保留）

推荐完整写法示例：

自动播放 + 行内播放的常见组合

若需页面加载后自动行内播放（如 H5 宣传页），关键点如下：

• 必须加 muted（iOS 强制要求）
• 建议加 autoplay，但注意部分微信版本可能拦截无交互的 autoplay
• 可监听 canplay 或 loadeddata 后调用 play() 提升兼容性
• 避免依赖 load 事件，它不保证媒体已就绪

微信内置浏览器特别说明

微信 iOS 版基于 WKWebView，支持 playsinline，但部分旧版本（如 7.0.5 之前）需额外配置：

• 确保页面 中有 viewport 声明：
  
• 避免父容器设置 transform 或 overflow: hidden，可能干扰内联渲染
• 微信安卓版通常默认行内播放，但加 playsinline 仍建议保留以统一行为

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！