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 模拟播放——基本都是在补救前期没理清这个前提。
