必须用<video>标签而非background-image实现视频背景，因其仅支持图像资源；需添加autoplay、muted、loop、playsinline四属性，并配合position、object-fit及z-index精确控制，同时提供poster和响应式降级方案。
直接用 background-image 塞视频地址是无效的——浏览器根本不会播放，只会报错或留白。真要实现 Hero 区域视频背景，必须用 <video> 标签 + 精确 CSS 控制，否则在 iOS 和 Android 上大概率黑屏、卡第一帧或被静音拦截。
为什么 background-image: url(video.mp4) 一定失败
CSS 的 background-image 只接受图像资源（jpg、png、webp、gradient），不支持任何视频格式。硬写进去：
- 浏览器当作无效值忽略，回退到默认背景色或空白
- DevTools Network 面板里根本看不到视频请求
- 没有任何错误提示，但效果完全不可见——这是最坑的“静默失败”
<video> 必须加的四个属性：autoplay、muted、loop、playsinline
缺一不可，尤其在移动端：
-
autoplay：触发自动播放，但现代浏览器强制要求静音才能生效 -
muted：不是可选项，是绕过自动播放策略的唯一合法方式 -
loop：避免视频播完后闪一下回到首帧，破坏视觉连贯性 -
playsinline：iOS Safari 默认强全屏，不加这个，视频会跳转到原生播放器，Hero 区域只剩黑块
漏掉任意一个，NotAllowedError: play() failed because user interaction is required 或直接不加载就发生了。
立即学习“前端免费学习笔记（深入）”；
CSS 层级与铺满的关键控制点
仅靠 width: 100%; height: 100% 不够，常见问题都出在这里：
- 父容器（如
.hero）必须设position: relative，否则子元素z-index无效 - 视频本身推荐用
position: absolute+top: 0; left: 0;，比fixed更可控（避免滚动时错位） -
object-fit: cover是刚需，不用它默认拉伸变形；fill会裁切内容，慎用 - 内容层（标题/按钮）必须设
position: relative和z-index: 2，视频层设z-index: 1，别信z-index: -1——某些安卓 WebView 下会失效 - 加
pointer-events: none到video元素上，防止遮挡下方按钮点击
移动端 fallback 和性能现实
即使所有属性都写对，真实设备上仍可能出问题：
- iOS 17+ 和部分 Android Chrome 对
autoplay muted的判定更严，首次访问常卡在 poster；监听canplaythrough后手动play()有时能缓解 - 高清 MP4 在低端机上解码卡顿、发热明显，建议导出 720p H.264 + 2Mbps 码率，WebM 作备选
- 务必提供
poster属性（哪怕只是单帧截图），但别依赖它——Safari 缩放 poster 很糊，最好用 CSSbackground-image叠一层降级图 - 视口宽度
< 768px时，建议 JS 检测并切换为静态背景，省流量也保体验
最易被忽略的是：视频文件体积和首帧加载延迟。一张 200KB 的 JPG 能秒出，而 5MB 的 MP4 即使加了 preload="metadata"，用户也可能盯着空白等两秒——这期间的视觉断层，只能靠 poster + CSS 过渡动画补救。
