移动端H5视频行内播放与竖屏适配需同时设置playsinline、webkit-playsinline和muted三属性，配合loadeddata事件调用play()并捕获异常，再通过width:100%;height:auto;、object-fit:cover及object-position:center实现竖屏适配，微信安卓还需添加x5-video-player-type和x5-video-player-fullscreen属性。
在移动端 H5 页面中实现视频行内播放与竖屏适配，核心不是“加一个属性就完事”，而是把播放行为、浏览器策略、CSS 渲染和用户交互四者对齐。iOS Safari 是主要瓶颈，但处理得当后安卓和微信环境也能稳定落地。
必须同时写上的三个 HTML 属性
单独加 playsinline 几乎一定失效。以下三项需共存，缺一不可：
- playsinline：标准属性，声明“我要在页面里播”
- webkit-playsinline：iOS 10 及更早版本（包括大量微信 iOS）依赖它，不加就退化为全屏
- muted：iOS 强制要求——有声视频无法通过用户手势外的任何方式启动内联播放；静音是解锁 inline 播放的钥匙
示例写法（推荐直接复制使用）：
<video src="video.mp4" playsinline webkit-playsinline muted loop controls></video>自动播放要稳，就得绕开“静默陷阱”
即使写了 autoplay，iOS 仍可能因页面未完全可见、首帧未加载完成等原因暂停。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- HTML 中保留 autoplay muted playsinline webkit-playsinline
- 监听 loadeddata 或 canplaythrough 事件，再调用
video.play() - 捕获失败并降级：用
.catch(e => console.warn('auto play blocked:', e))记录，同时展示“点击播放”按钮
避免在 setTimeout、接口回调或 load 事件里直接调 play() —— 这些都不是用户手势上下文，Safari 会静默拒绝。
让视频真正“贴着竖屏”显示，靠的是 CSS 配合
属性只是开门，尺寸和裁切才是视觉落地的关键。常见变形、黑边、溢出，90% 出在这里：
- 给
<video>设 width: 100%; height: auto; 或包裹在 aspect-ratio: 9/16 容器中（支持现代浏览器） - 必须加 object-fit: cover（填满不拉伸）或 object-fit: contain（完整显示带黑边）
- 补上 object-position: center，防止某些 Android 机型默认左上角对齐导致画面偏移
- 父容器避免
overflow: hidden或transform（如 translateZ(0)），这两者会触发 iOS 全屏 fallback
微信和安卓 WebView 的兼容补丁
微信 iOS 行为基本等同 Safari；但微信安卓（X5 内核）有时会忽略 playsinline，可加两个私有属性增强识别：
- x5-video-player-type="h5-page"：告诉 X5 “这是 H5 页面内播放”
- x5-video-player-fullscreen="false"：显式禁用 X5 全屏模式
这两个属性对非 X5 环境无影响，加上无害，建议统一带上。
