用<video>标签实现背景视频需将其置顶、fixed全屏、object-fit:cover,并设autoplay muted loop playsinline;必加poster和CSS降级fallback,避免白屏;移动端需用户手势解锁播放。

用 <video> 标签实现背景视频,别用 background-video
HTML 没有 background-video 这种属性或标签,所谓“背景视频”本质是把 <video> 元素置于页面最底层,并用 CSS 覆盖全屏、隐藏控制栏、设为静音循环。常见错误是试图在 body 的 style 里写 background: url(video.mp4) —— 这完全无效,浏览器不支持视频作为 background-image。
正确做法:
- 把
<video>放在<body>最顶部(或<header>内),确保 DOM 顺序靠前 - 用
position: fixed+top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;铺满视口 - 必须加
autoplay muted loop属性,否则 Chrome/Safari 会阻止自动播放 - 加
playsinline(iOS Safari 必需),避免全屏跳转
为什么加 poster 属性和 fallback 图片很重要
视频加载有延迟,首帧出现前页面会空白几秒;移动端可能因网络或策略完全不加载视频。不处理 fallback,用户看到的就是白屏或滚动条错位。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 用
poster指向一张与视频首帧一致的缩略图,格式推荐.webp(体积小、兼容好) - 在
<video>外层包一层<div class="bg-video-wrapper">,用 CSS 设置该 div 的background-image作降级 - 不要依赖 JS 检测视频是否加载成功再显示内容 —— 延迟不可控,优先用声明式 fallback
object-fit: cover 和 object-fit: fill 的实际差异
这是最容易被忽略的视觉坑。用 cover 会等比缩放并裁剪,保证铺满且不拉伸;用 fill 会强行拉伸填满,导致人物变形、文字模糊。
典型场景判断:
- 宣传页/首页横幅:选
cover,牺牲边缘内容保画质 - 纯装饰性动态纹理(如粒子动效视频):可选
fill,无关键构图 - 绝对避免在
width: 100vw; height: 100vh同时用object-fit: contain—— 会留白,破坏“背景”感
移动端自动播放限制下,怎么让视频真正静音播放
即使写了 muted,某些安卓 WebView 或旧版 iOS 仍可能拦截。根本原因是:浏览器要求“用户手势触发后才能解禁音频”,而 muted 本身不等于“已获授权”。
稳妥方案:
- 确保
<video>标签上同时存在muted和autoplay,且没被 JS 动态移除 - 避免在
document.ready或window.load里调用play()—— 此时无用户上下文,大概率失败 - 如果业务允许,首次点击任意区域时调用一次
video.play().catch(() => {}),多数浏览器会就此解锁后续自动播放
复杂点在于:不同机型对“静音自动播放”的宽容度差异极大,测试必须覆盖 iOS 15+、Android Chrome 110+、微信内置浏览器。别信“本地测试 OK 就上线”—— 真实网络环境和系统策略才是关键变量。



















