video标签必须显式设置muted、autoplay、loop、preload="metadata"和playsinline，缺一不可；muted是自动播放硬性前提，preload="metadata"避免整段下载致首屏卡顿，ios需playsinline防止全屏跳转，poster防黑屏，css须用position+object-fit优化渲染。
背景视频卡顿、首屏白屏、iOS不播、移动端耗电快——这些问题不是视频本身的问题，而是HTML层没做对。
video 标签必须带 muted、autoplay、loop 和 preload="metadata"
缺任意一个都会触发浏览器拦截或延迟播放。muted 是自动播放的硬性前提；autoplay 和 loop 缺一不可；preload="metadata" 能避免预加载整段视频（preload="auto" 会拖慢首屏）。别信“加了 autoplay 就能播”，Chrome/Safari 现在只认 muted + autoplay 组合。
-
poster属性必须设，提供首帧占位图，防止黑屏或空白 - 不要用
controls—— 背景视频不需要用户操作界面，加了反而增加渲染开销 -
playsinline对 iOS 必须加，否则 Safari 强制全屏跳转
CSS 定位和 object-fit 是性能关键点
video 默认是 inline 元素，z-index 无效，且拉伸变形会导致 GPU 合成层激增。必须用 position: fixed 或 position: absolute，并配合 object-fit: cover。
- 避免写
width: 100vw; height: 100vh—— 视口尺寸变化时重绘开销大；改用min-width: 100%; min-height: 100%更稳定 -
z-index: -1不生效？检查父容器是否设置了position: relative—— 没有它，z-index 在独立层叠上下文中无效 - 禁用
transform（如scale(1.05)）和opacity：它们会强制创建新合成层，移动端尤其吃 GPU
移动端必须降级，不能靠 JS 检测后再替换
等 JS 执行完再换图，用户已经看到白屏或加载失败提示了。最稳的方式是服务端 UA 判断，或用媒体查询直接隐藏：
- 在 CSS 中用
@media (max-width: 768px)直接display: none视频，并用background-image替代 - iOS Safari 不支持静音自动播放？错——它支持，但必须由用户手势触发第一次
play()。所以初始不设autoplay，监听touchstart后再调video.play() - 安卓 WebView 兼容性更差，部分版本连
canPlayType("video/mp4")都返回""，建议服务端直接返回静态背景 HTML
格式、分辨率、编码参数直接影响解码压力
浏览器解码能力差异极大，同一段 4K H.265 视频，在低端安卓机上可能直接卡死。别拿“我电脑上很流畅”当上线依据。
- 分辨率上限设为
1280×720，背景视频不是观影，高分辨率只涨体积不提体验 - 只用 H.264 MP4（兼容性最强），备选 WebM（
type="video/webm"），别碰 AV1 或 HEVC —— 解码功耗翻倍 - FFmpeg 压缩必须加：
-vcodec libx264 -crf 28 -preset fast -movflags +faststart，否则首帧缓冲时间可能超 3 秒
真正难的不是让视频播起来，而是让它在所有设备上「不抢资源、不挡交互、不耗电、不报错」——这些细节藏在 video 属性、CSS 层叠逻辑、服务端判断和编码参数里，漏掉任何一环，用户感知到的就是卡顿或黑屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
