移动端视频背景不支持时应主动降级为静态图：通过 canplaytype() 和 play().catch() 双重检测，用绝对定位叠层+visibility隐藏实现无缝切换，并配合用户手势触发播放、playsinline、css微动画及渐变蒙版保持视觉一致性。
移动端不支持video背景时怎么办
直接说结论：iOS Safari 和部分安卓 WebView 默认禁用自动播放带声音的 video，且即使静音，某些低版本或省电模式下仍会跳过加载——这时候视频背景根本不会显示，页面留白或崩溃。不能指望它“尽力而为”，得主动降级。
实操上不是加个 poster 属性就完事，那是给加载失败时看的封面，不是给不支持场景用的兜底方案。
- 检测依据不是 UA 字符串（不准），而是用
HTMLMediaElement的canPlayType()+ 实际加载试探 - 优先在 CSS 里用
@supports (background: video)不靠谱——目前没浏览器识别这个语法，纯属无效写法 - 真正可行的是 JS 判断：
document.createElement('video').canPlayType('video/mp4')返回空字符串，基本可判定不支持 - 但要注意：部分安卓机返回
"maybe"却依然无法 autoplay，所以必须配合play().catch()错误捕获来二次确认
如何用 CSS 把静态图无缝接在视频后面
关键不是“替换”，而是“叠层隐藏”。视频和图片都设为 position: absolute，用同一套宽高、object-fit: cover 和 top/left/right/bottom: 0 对齐，再靠 JS 控制显隐。
别用 display: none 切换——它会触发重排，且 iOS 上可能造成后续 video 元素无法恢复播放；改用 visibility: hidden 或透明度 + pointer-events: none 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 图片格式选
.webp（现代浏览器）或 fallback 到.jpg，避免.png带透明通道导致背景发灰 - 图片尺寸不必和视频完全一致，但建议等比缩放后裁切，否则
object-fit: cover在不同屏幕比下会切掉关键内容 - 别忘了给图片加
loading="lazy"，否则降级后它会在首屏外也加载
autoplay 和 muted 在 iOS 上为什么还是失败
iOS 要求视频必须是用户手势触发后才能播放，哪怕加了 muted 和 autoplay，页面 onload 时调用 play() 也会被拒绝，并抛出 NotAllowedError。
这不是 bug，是策略。所以不能把播放逻辑写死在 DOMContentLoaded 里，得等真实交互。
- 最简方案：监听一次
touchstart或click（注意 iOS 16+ 对click触发时机更严格），然后立即调用video.play() - 如果用户始终没点，就默认降级——别等，别轮询，别模拟点击
-
playsinline属性必须加，否则 iOS 会全屏弹出，破坏布局 - 慎用
loop：某些安卓机型 loop 次数多了会内存泄漏，建议用onended手动重置currentTime = 0再play()
降级后图片怎么保持和视频一样的动态感
纯静态图确实呆板，但加 CSS 动画（比如轻微缩放、位移）成本低、兼容好，比 JS 控制 canvas 绘制现实得多。
重点不是“动”，是“不突兀”：动画时长控制在 8–12s，用 ease-in-out，幅度不超过 2%，否则手机上看会晕。
- 用
background-position配合background-size: 102% 102%做缓慢平移，比 transform 性能更好 - 避免同时对多个元素加动画，尤其是和视频降级层同级的其它模块，防止 iOS 上触发动画卡顿
- 如果原视频有渐变蒙版（比如底部文字区加深），图片上必须用
linear-gradient叠加一层相同遮罩，否则降级后文字可读性骤降
最麻烦的其实是视频帧率和图片曝光匹配——拍视频时用固定 ISO 和快门，截图选中间帧，否则降级瞬间会有明显色温/亮度跳变。这事没法靠代码解决，得前端和设计师对齐素材规范。
