html5页面在移动端如何竖屏播放

video标签在ios默认强制全屏，需添加playsinline和webkit-playsinline属性并配合用户手势触发play()才能实现内联竖屏播放。

video 标签默认横屏？其实是 iOS 的限制

html5 <video></video> 在 iOS safari（包括微信内置浏览器）上，只要设置了 playsinline，就能在竖屏页面内播放；但没加这个属性，系统会强制全屏——这不是 bug，是 Apple 的策略：防止网页视频意外占用用户视口。

常见错误现象：Uncaught (in promise) NotSupportedError: play() failed because the user didn't interact with the document first，或点击后直接跳转横屏全屏界面。

• 必须加 playsinline 属性（iOS 10+），且推荐同时写 webkit-playsinline 兼容旧版微信
• 不能依赖自动播放（autoplay）触发——iOS 要求用户手势后才能调用 play()
• muted 不是必须项，但加了能提高自动播放成功率（尤其安卓部分浏览器）

如何让 video 真正“贴着页面”竖屏播放

光加 playsinline 不够，样式和上下文也得配合。否则视频可能被父容器裁剪、拉伸，或因 Object-fit 缺失导致黑边/变形。

使用场景：H5 活动页、产品介绍页、短视频信息流等需要控制播放区域的场合。

立即学习“前端免费学习笔记（深入）”；

• 给 <video></video> 设置 width: 100%; height: auto; 或固定宽高比容器（如 padding-top 百分比 hack）
• 务必加 object-fit: contain; 或 object-fit: cover;，否则 iOS 会按原始分辨率撑开
• 避免父元素设 overflow: hidden 且未预留足够空间——iOS 全屏退出时可能残留渲染错位

安卓端反而更简单，但要注意 webview 差异

大部分安卓原生浏览器和 chrome 支持 playsinline，且对自动播放更宽松；但微信安卓版的 X5 内核（TBS）有时会忽略该属性，需额外干预。

性能影响：不启用 playsinline 时，每次播放都会触发一次上下文切换（页面 → 全屏播放器 → 页面），卡顿感明显；启用后全程 dom 内渲染，内存和帧率更稳。

• 微信安卓环境可尝试加 x5-video-player-type="h5-page" 和 x5-video-player-fullscreen="false"（仅 TBS 有效）
• 不要依赖 orientationchange 事件去动态控制播放——它在 iOS 上触发不可靠，且与视频状态不同步
• 如果用 Video.js 或 plyr 等封装库，确认其版本支持 playsinline 并已透传到原生 <video></video> 标签

用户手势触发 play() 的最小安全写法

绕过 iOS 播放限制最稳妥的方式，是把 play() 绑在用户真实交互事件里（click/touchstart），而不是 onload 或定时器。

容易踩的坑：监听了 click，但目标元素是 <div> 且没设 <code>cursor: pointer，某些 iOS 版本会拒绝识别为有效手势。

• 绑定事件的目标必须是「可交互元素」：比如 <button></button>、带 role="button" 的 <div>，或明确设了 <code>tabindex="0"
• 调用 video.play() 前，确保 video.src 已设置，且不在加载中（检查 video.readyState >= 2）
• 捕获 Promise reject：用 .catch(e => console.warn("play failed:", e))，别让它静默失败

实际兼容性最稳的写法就是：一个带 playsinline 和 webkit-playsinline 的 <video></video>，包裹在响应式容器里，播放按钮用 <button></button> 实现，点下立刻调 play() 并处理 reject。其他花活，比如监听旋转、动态改宽高、用 canvas 模拟播放——基本都是在补救前期没理清这个前提。