结论：用做背景必须同时提供多格式+降级+poster属性，否则ios safari、低配安卓机、js禁用或加载失败时会留白或报错。
直接说结论：用 <video></video> 做背景时，必须同时提供 <source></source> 多格式 + <img> 降级 + poster 属性，否则 iOS Safari、低配安卓机、JS 禁用或加载失败时会留白或报错。
为什么 <video></video> 作为背景在移动端常失效
不是代码写错了，而是浏览器策略和网络环境共同导致的：iOS Safari 默认禁止自动播放带声音的视频（哪怕 muted），部分安卓 WebView 不触发 canplaythrough，4G 弱网下 src 加载超时后不 fallback 到 poster 或 <img>。
-
autoplay在 iOS 10+ 必须配合muted才可能生效，但仍有概率被拦截 -
poster只在视频未开始加载或加载失败时显示，一旦进入加载态（哪怕卡住），它就消失 → 此时若没写降级<img>，页面就是空白 - 只写一个
.mp4<source></source>，Safari 17+ 和 Firefox 可能因编解码不支持直接跳过整个<video></video>标签
必须写的三段式 HTML 结构
这不是“推荐写法”，是实际线上项目验证过的最小可用结构。注意顺序、属性和嵌套关系：
<div class="video-bg">
<video autoplay muted loop playsinline poster="fallback.jpg"><source src="bg.webm" type="video/webm"><source src="bg.mp4" type="video/mp4"><!-- 降级图片，仅当 video 完全不可用时才渲染 -->
@@##@@
</source></source></video>
</div>
-
playsinline是 iOS 全屏播放的开关，缺了它在 iPhone 上点开就全屏 -
poster和<img src="fallback.jpg" alt="背景图">的src应为同一张图（尺寸一致），避免闪动或错位 -
<source></source>顺序很重要：WebM（VP9）放前面，MP4（H.264）放后面；浏览器按顺序尝试，遇到支持的就停 - 不要给
<video></video>设width/height，用 CSS 控制尺寸和 object-fit
CSS 适配要点：别让视频拉伸变形或溢出
常见错误是直接设 width: 100%; height: 100vh;，结果视频被强行拉伸、黑边错位、或在小屏上裁切过度。
- 用
object-fit: cover;让视频填满容器且保持比例（类似background-size: cover） - 容器必须设
position: relative;，<video></video>设position: absolute;并撑满，否则<img>降级无法对齐 - 加
z-index: -1;到<video></video>，确保内容层在它上面（别忘了给父容器设overflow: hidden;防边缘溢出） - 在
@media (prefers-reduced-motion: reduce)下建议暂停视频，用video[autoplay] { animation: pause-video; }或 JS 监听并pause()
JS 补充控制：监听加载失败并手动 fallback
HTML 降级只能覆盖“完全不识别 <video></video>”或“没加载任何 <source></source>”的情况。真实场景中，视频可能已开始加载但卡在 buffering，此时 poster 已消失、<img> 还没渲染 —— 这就得靠 JS 补一手。
- 监听
video的error和stalled事件（后者表示加载停滞超过 3 秒） - 检测
video.readyState 且 <code>video.networkState === 3（NETWORK_NO_SOURCE）时，显式插入降级图或隐藏 video 显示 img - 不要依赖
canplaythrough：它在弱网下几乎不会触发，反而造成长时间白屏 - 示例关键逻辑：
video.addEventListener('stalled', () => { if (video.duration === 0) showFallbackImage(); });
真正难的不是写出能跑的代码，而是想清楚「谁在什么条件下看不到视频」—— 是没 JS？是 Safari 拦了 autoplay？是 WebM 解码失败？还是 2G 网络下连 MP4 都没下完？每种情况对应的 fallback 路径都得实测，不能只看桌面 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
