移动端video自动播放必须同时加muted和playsinline属性，否则iOS Safari和Android Chrome会拦截play()调用；有声播放需用户点击后立即调用play()，不可延迟；响应式应优先用aspect-ratio，controls建议自定义以保障小屏体验；多清晰度需JS动态切换或HLS/DASH方案。
移动端 video 标签必须加 playsinline 和 muted 才能自动播放
不加这两个属性，iOS Safari 和 Android Chrome 会直接拦截 play() 调用，控制台报错：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.。即使写了 autoplay，也只会卡在首帧、黑屏或 poster 图不动。
正确写法是：<video autoplay muted playsinline></video>。注意：playsinline 没有值（不是 playsinline="true"），且必须和 muted 同时存在；webkit-playsinline 已淘汰，现代 Safari（15.4+）无需前缀。
- 若需有声播放，必须等用户点击后调用
video.play()，且不能延迟到下一个事件循环（比如setTimeout(() => video.play(), 0)大概率失败） - 移动端全屏行为由系统控制，
playsinline是防止 iOS 自动跳转全屏的唯一可靠方式 - 部分安卓 WebView（如微信内置）对
playsinline支持不稳定，可加x5-video-player-type="h5-page"作为兜底（仅限 X5 内核）
保持宽高比不能只靠 width: 100%，要用 aspect-ratio 或 padding-bottom 技巧
<video></video> 默认渲染不响应式：设 width: 100% 后高度由内容撑开，小屏下 controls 被裁剪、poster 错位、甚至整个播放器塌陷。真正要的是“固定比例缩放”，不是“填满容器”。
推荐优先用 aspect-ratio: 16 / 9（Chrome 88+、Firefox 89+、Safari 15.4+ 全支持）。老浏览器 fallback 方案是外层容器设 position: relative，内层 <video></video> 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%，再用伪元素或子 div 控制 padding-bottom: 56.25%，并配 height: 0。
立即学习“前端免费学习笔记（深入）”；
- 别用
height: auto—— 它依赖原始分辨率，在高清屏或缩放后失效 -
object-fit: cover比contain更实用：裁剪但无黑边，符合主流 App 体验；若需完整画面，才选contain - poster 图必须和视频同宽高比，且分辨率不低于 720p，否则 retina 屏模糊
移动端 controls 显示异常？禁用原生控件 + 自定义更可控
原生 controls 在小屏上按钮过小、重叠、无法点击，且 controlslist="nodownload nofullscreen" 只是提示，不生效也不影响布局。真要精简或统一风格，就得自己写 UI。
做法是移除 controls 属性，用 <div class="video-player"> 包裹 <code><video></video>，再手动加播放/暂停按钮、进度条（<input type="range">）、时间显示等。关键点：监听 loadedmetadata 后读 video.duration，用 timeupdate 更新进度，拖拽时监听 input（不是 change）事件实时跳转。
- 移动端必须同时监听
touchstart/touchmove/touchend和mousedown/mousemove/mouseup，否则拖拽失灵 - 进度条
max值应为video.duration，不要硬编码 100 —— 否则跳转不准 - 避免用
video.paused判断状态，它在加载中、自动播放被拒时不可靠；显式维护一个let isPlaying = false变量
src 和 source 的选择逻辑不是“多清晰度自动切换”，而是格式兜底
<source></source> 的 media 属性只匹配媒体查询（如 media="(min-width: 768px)"），不会根据网速、设备像素比或带宽自动切清晰度。srcset 对 <video></video> 完全无效。
真正需要多清晰度时，得用 JS 动态切换 video.src，或引入 HLS/DASH 流媒体方案（如 hls.js）。简单场景下，<source></source> 仅用于格式兼容：MP4（H.264+AAC）覆盖绝大多数设备，WebM（VP9+Opus）作补充，OGG 基本可弃用。
- 多个
<source></source>不会并发加载，浏览器按顺序试播，找到第一个支持的就停 - 务必提供降级文本：
<video>...</video>您的浏览器不支持视频播放，否则不支持的设备白屏 - 移动端不要依赖
preload="auto"—— 它可能触发大流量下载；preload="metadata"更安全，只加载头信息
