video自动播放需同时设autoplay和muted；ios需加playsinline；换src后须调load()和play()；自适应推荐aspect-ratio或display:block+width:100%。
video 标签不自动播放？检查 autoplay 和 muted 是否同时存在
现代浏览器（Chrome、Edge、Safari）默认禁止有声音的自动播放，哪怕写了 autoplay 也大概率失效。真正起效的前提是：必须同时加 muted 属性。
-
<video autoplay muted src="demo.mp4"></video>—— 可静音自动播 -
<video autoplay src="demo.mp4"></video>—— 大概率被拦截，控制台可能报DOMException: play() failed because user interaction is required - 如果必须带声播放，得等用户真实交互（比如点击按钮）后再调用
play()方法 - Safari 对
autoplay更严格，即使muted有时也要配合playsinline（尤其 iOS）
视频在手机上全屏播放？加 playsinline 控制内联行为
iOS Safari 默认强制全屏播放 <video></video>，导致布局错乱或交互中断。这不是 bug，是苹果的策略限制。
- 必须显式添加
playsinline属性：<video playsinline src="clip.mp4"></video> - 仅加
playsinline不够，iOS 10+ 还要求webkit-playsinline（旧版兼容写法，现在多数可省略） - 微信内置浏览器（X5 内核）对
playsinline支持不稳定，有时需配合x5-video-player-type="h5-page"等私有属性 - 安卓 Chrome 一般默认内联，但部分定制 WebView 可能禁用，建议统一加上
src 换了但视频没更新？注意浏览器缓存和 load() 调用时机
直接改 video.src 后不调用 load()，浏览器可能复用旧解码器状态，导致画面卡住、音频错位甚至黑屏。
- 修改
src后务必手动触发：video.load(); video.play(); - 不要在
video.readyState === 0（尚未加载）时就调play()，容易报错Failed to load because no supported source was found - 如果用的是 base64 或 blob URL，注意生命周期：blob URL 在页面刷新后失效，
revokeObjectURL过早调用也会导致空白 - 动态换源时，建议先
video.pause()，再video.src = newSrc，再load()，避免状态冲突
怎么让视频自适应容器宽高？别只靠 CSS width/height
单纯设 width: 100% 容易拉伸变形，或高度塌陷（因为 <video></video> 默认是 inline 元素，有基线间隙）。
立即学习“前端免费学习笔记（深入）”；
- 加
display: block消除底部空白：video { display: block; width: 100%; height: auto; } - 保持宽高比推荐用
aspect-ratio（Chrome 88+/Firefox 89+ 支持）：video { aspect-ratio: 16 / 9; width: 100%; } - 老浏览器可用 padding-top 百分比 hack，但需包裹一层
div，且video设为绝对定位 - 慎用
object-fit: cover—— 它会裁剪画面，不是所有场景都适用；contain才是等比缩放不裁剪
video 标签看着简单，但每个属性背后都有平台差异和策略限制。最常出问题的不是语法写错，而是忽略了「用户交互时机」「移动端策略」「缓存与状态同步」这三个隐性前提。
