简介一份面向网页设计与前端入门者的全屏视频背景代码包专注使用HTML与CSS打造沉浸式视觉体验适用于个人博客、产品展示页或企业官网首屏等场景。资源完整演示了如何借助video标签承载视频并用autoplay、loop、muted控制自动播放、循环和静音同时提供多个source源以兼容不同浏览器CSS部分兼顾固定定位、最小宽高和object-fit:cover裁剪方案配合媒体查询解决小屏适配问题有效避免视频拉伸、黑边等显示异常。压缩包共计3个文件包括mp4视频素材、html页面结构和css样式文件整体大小约4.11MB结构精简清晰下载后即可直接运行和二次修改。该资源已有5372人学习适合前端初学者对照练习、理解响应式布局要点或作为快速搭建视频背景页面的基础模板。通过阅读源码还能掌握视频文件压缩与静态图片备选等性能优化思路是一份完整且易上手的前端参考资料。1. 全屏视频背景的 HTML一屏画面三段代码的基础盘全屏视频背景的 html 页面看着高级写起来是真容易翻车。很多新手接到需求后第一反应是把 video 标签往页面里一塞结果打开一看视频不自动播、画面被拉伸、文字被挤到角落甚至整个布局直接塌掉。这个资源的核心不是给你一段代码而是把 video 标签、css 定位、移动端自动播放策略这三件事串成一套能直接复用的模板覆盖了从桌面 Chrome 到 iPhone Safari 的常见边界。适合做落地页、产品介绍页、个人作品集的一线从业者也适合想搞懂视频背景底层逻辑的前端初学者。下载后改改视频路径就能用里面把渲染时的常见坑位都标出来了。2. 视频背景的核心套路video 标签职责与 CSS 全屏撑开2.1 最小可用结构三层嵌套各管一件事先给一份能跑起来的最小结构。视频背景的 html 结构通常分三层最外层容器负责定位和裁切video 负责播放内容层负责文字和交互。这三层职责拆清楚后面改起来才不打架。div classvideo-wrap video classbg-video autoplay muted loop playsinline source srcvideos/bg.mp4 typevideo/mp4 你的浏览器不支持 video 标签请换现代浏览器访问。 /video div classpage-content h1主标题/h1 p副标题或说明文字/p /div /div这里 video 标签的 src 没有写在属性里而是用子标签 source 指定是为了后面能同时挂 webm 和 mp4 两种格式让浏览器自己挑第一个能解码的。video 默认是个内联替换元素它在文档流里占位尺寸按视频原始分辨率来直接塞进页面会把后面的内容挤得乱七八糟。所以必须先把 video 放进程一个定位容器里让容器去扛整个视口的尺寸video 再在这个容器里绝对定位。2.2 CSS 全屏的关键绝对定位、width/height、object-fit很多同学直接把 video 的 width 写成 100vw、height 写成 100vh觉得这样就是全屏了。结果视频源宽高比跟屏幕不一致时画面被拉得又扁又长。正确的做法是让容器全屏video 在容器内部用绝对定位撑满再用 object-fit 控制画面填充方式。.video-wrap { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }CSS 里面层叠上下文有个基本规则position 属性不是 static 的元素会盖住普通文档流里的元素。video 用了 absolute 之后脱离文档流等于把后面所有的块级元素都压在底下所以内容层必须靠 z-index 拔高这个在 2.3 节说。object-fit 是这里最关键的属性它的作用机制跟 CSS 背景图的 background-size 几乎一样cover 保持视频原始比例缩放后铺满整个容器多余的部分被裁掉因此容器的 overflow: hidden 必须开着否则裁掉的画面还是会露出来形成一条突兀的边缘线。三者的区别我用一个表格记录方便后面选型object-fit 取值行为典型使用场景cover保持比例铺满容器裁掉超出部分视频背景首屏满幅画面contain保持比例完整显示可能留黑边视频预览、校验素材fill不保持比例强制拉伸填满基本不用除非故意做变形效果cover 是视频背景的唯一合理答案。contain 会让左右两侧露底fill 会把人物压成胖瘦不一的怪样子。这三个值也是面试官常拿来问的细节背下来比临时试快得多。2.3 内容层怎么压在视频上面z-index 与 pointer-events视频盖住内容这个现象新手十有八九会遇到。原因上面说了绝对定位的元素默认比普通流高一层。.page-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff; text-align: center; }这里有两个细节容易被忽略。第一z-index 只对定位元素生效所以 content 必须同时设置 position: relative否则 z-index: 1 写了也白写。第二如果视频上方要放按钮或者链接内容层里的元素能正常点击但如果有一天你在 video 上直接绑了点击事件会发现点了没反应——视频播放器会拦截鼠标事件。需要让点击穿透视频时给 video 加 pointer-events: none这样鼠标事件会穿过视频层落到下面真正的交互元素上。还有一个排版细节视频是全屏的内容层如果直接垂直居中在窄屏或内容较长时会把顶部和底部内容裁掉。我自己习惯在 content 里再加一层 padding或者用 justify-content: center 配合 align-items: center 时留出上下安全间距必要时用 min-height 撑住内容区别让文字贴边。3. 让视频自动播的参数组合autoplay、muted、playsinline 与 preload3.1 参数表每个属性管什么、不写会怎样视频背景的 html 页面里video 标签上的属性组合就是全部的核心参数。很多人只抄了代码没理解每个属性的意义结果换个浏览器就翻车。我把几个关键属性整理成一张表照着这张表检查比盲改代码快属性作用漏写的后果autoplay页面加载后自动开始播放视频停在第一帧用户必须手动点播放muted静音播放视频桌面 Chrome 会直接阻止带声音的自动播放loop播放结束后循环重播播完一遍后画面停死在最后一帧playsinlineiOS 内联播放不进系统播放器iPhone 上视频会弹成全屏播放器preload控制视频预加载策略各浏览器默认行为不一致poster设置封面图首帧未加载时显示黑屏或乱帧这六个属性里最容易被误解的是 autoplay 和 muted。很多人觉得“我要自动播加 autoplay 就够了”实际上是浏览器厂商定的规矩任何带声音的自动播放都会被拦想自动播就必须同时静音。这个策略在桌面 Chrome、Firefox、Edge 上是统一的也是视频背景最常见的翻车点。3.2 移动端为什么必须 muted playsinline移动端的限制比桌面更狠。iOS Safari 从很早就开始执行“不允许带声音自动播放”的策略而且默认情况下 video 一旦播放就会进入系统的原生播放器横屏全屏那是家常便饭。要让视频老老实实待在你的页面里当背景必须同时写 muted 和 playsinline一行都不能省。video autoplay muted loop playsinline preloadauto postercover.jpg source srcbg.mp4 typevideo/mp4 /videoplaysinline 这个属性的意思是“在页面内联播放不触发系统播放器”它是 iOS Safari 从 iOS 10 开始支持的标准写法。老一些的安卓 WebView 里 X5 内核要用 x5-playsinline如果你们产品有存量安卓盒子之类的设备可以额外加一个不影响标准浏览器。preload 我建议默认写 auto但前提是视频文件别太大如果视频有几 MB 甚至十几 MB把 preload 改成 metadata让页面先把文字和图片渲染出来视频再在后台慢慢缓冲首屏体验会好很多。这段组合在 iOS 上还有一个行为细节muted 的 video 即使 autoplay 被用户设置里的“低数据模式”限制只要有 playsinline 配合大部分情况下还是会尝试播放。如果实在没播就是系统级的限制代码层面兜不住这时候 poster 封面就派上用场了。3.3 poster 封面视频没起来之前先撑住场面poster 是视频封面图的属性它在视频文件还没加载完时显示加载完且触发自动播放后会被视频画面替换。视频背景页面里poster 的价值比想象中大视频首帧往往是最难看的黑屏而 poster 是静态图片请求快、渲染稳能保证用户打开页面第一眼看到的是一个完整画面而不是黑匣子。.video-wrap { background: url(../img/cover.jpg) center/cover no-repeat; }常见做法是给容器再加一层同图背景video 的 poster 负责视频区域内显示封面容器的 background 负责兜底。两处用同一张图即使视频源加载失败、或者用户浏览器不支持 video 标签页面背景依然成立。poster 图片的尺寸建议按视频宽高比来做不要拿一张 4:3 的图去配 16:9 的视频会拉伸得很明显。还有一点poster 只是一张静态图它不会循环播放也不会动所以视频加载慢时用户看到的是固定画面视觉上可能误以为页面卡住了。喜欢的话可以在 poster 之外再用 css 加一层轻微缩放动画给静态封面一点呼吸感但这不是必须的别为了好看把小问题搞成大负担。4. 视频格式与性能取舍源文件怎么选、懒加载怎么做4.1 video 源格式mp4/webm 的兼容顺序视频背景的 html 模板里视频源文件的选择直接决定兼容面。mp4 配 H.264 编码是兼容性最好的方案从桌面浏览器到 iPhone 全都支持webm 配 VP9 编码在 Chrome 和 Firefox 上文件更小、画质也不错但 Safari 不认 webm。所以通用做法是两种都准备用 source 标签按顺序排给浏览器自己挑。video autoplay muted loop playsinline source srcbg.webm typevideo/webm source srcbg.mp4 typevideo/mp4 /video这里 webm 一定要写在 mp4 前面原因很简单Chrome 和 Firefox 遇到 webm 时会直接选它webm 体积小加载快Safari 不认识 webm会自动跳过第一个 source 落到 mp4。顺序写反了的话Chrome 会一直用 mp4等于白白多传了几 MB 数据。编码上注意mp4 里最好用 H.264 主档High Profile兼容 iPhone 的老机器也没问题webm 用 VP9 就行别去追最新的 AV1浏览器支持面还不够。4.2 性能优化时长、码率、压缩策略视频背景最常见的性能事故是拿一段几分钟的完整宣传片直接当背景。视频背景的客观规律是循环片段不是完整叙事——用户停留在首屏的时间可能只有几秒你塞给他一个 60MB 的视频白屏时间大概是三到五秒谁等得起。处理这类问题的思路是先定规格再做素材时长控制在 8 到 15 秒能循环且看不出接缝分辨率最高 1080p够清晰就行4K 完全是浪费视频码率压到 2M 到 3Mbps文件大体在 3 到 5MB音频直接去掉视频背景反正 mutedffmpeg 压缩命令我常用下面这条参数含义一并写清楚ffmpeg -i source.mp4 -vf scale1920:1080,fps30 -c:v libx264 -b:v 2M -an -movflags faststart bg.mp4这条命令里-vf 先把画面缩到 1920x1080 并限制 30 帧-c:v libx264 指定 H.264 编码-b:v 2M 把视频码率压到 2Mbps-an 直接丢掉音轨最后 -movflags faststart 把元数据 moov 挪到文件开头这样浏览器可以边下载边播放不用等整个文件读完。视频背景的资源里附的素材基本都是按这个规格处理过的所以文件不大、加载不慢。没有 ffmpeg 经验的可以找小丸工具箱之类的 GUI 工具参数思路一样核心就一句控制时长、控制码率、去掉音轨。视频背景不是视频播放器体验没人会盯着它看细节。4.3 懒加载与降级从 poster 到真实视频在某些场景下视频一进页面就加载不是最优解。比如首屏有很多关键图片和文字视频 5MB 的流量会把带宽全吃掉再比如企业站首屏同时挂了几个图片滑块视频和轮播图抢资源就会显得页面很卡。常见做法是先把 poster 铺起来等 window 的 load 事件触发后再用 JS 给 video 设置 src让它自然加载。const video document.querySelector(.bg-video); window.addEventListener(load, () { video.src bg.mp4; video.load(); });load 事件表示页面上所有图片、样式、脚本都加载完了这时候再弹视频请求就不会跟关键资源抢首屏带宽。video.load() 的作用是让浏览器重新解析 src 并准备播放src 是动态赋值的属性里原本没有源所以不调用 load() 有时会碰到播放状态不刷新。设置完 src 之后如果 autoplay 存在浏览器会自动接管播放不需要额外调用 play()但保险起见可以补一个video.play().catch(() { video.muted true; video.play(); });play() 返回的是一个 Promise如果被浏览器策略拦截会走 catch。catch 里把 muted 设为 true 再试一次这是应对“用户环境禁用了自动播放”时的兜底写法也是我处理视频背景类需求时固定保留的一段逻辑。提示降级方案要提前想清楚。如果视频加载失败或浏览器不支持 video容器上那张 cover.jpg 的 css 背景就是最后的防线所以 poster 和背景不要只写一处两处都铺上页面才不会有裸奔的尴尬。5. 避坑清单视频背景最常翻车的五个现场视频背景的 html 项目在线上遇到的绝大多数问题都不是代码写得有多高级而是那几个老属性没写全。我把这几年踩过的坑集中整理成五条每一条按现象、原因、解决的顺序写遇到问题照着对号入座。5.1 视频不自动播放现象页面打开后视频停留在一张静态画面完全不动需要用户手动点播放。原因八成是 muted 没写。从 Chrome 66 开始桌面浏览器全面禁止带声音的自动播放没静音的视频一律被拦。少部分是用户系统设置了省电模式或低数据模式属于环境限制。解决先保证标签上有 autoplay muted loop playsinline 四个属性再用 JS 补一道保险const video document.querySelector(.bg-video); window.addEventListener( scroll, () { if (video.paused) { video.muted true; video.play().catch(() {}); } }, { once: true } );这段逻辑的意思是用户第一次滚动页面时如果视频还没播就强制设置静音并再次触发播放。{ once: true } 保证它只执行一次不会在每次滚动时都试探。很多浏览器对“用户交互后播放”的限制会放宽这个兜底在真机上实测能救回一部分被拦截的场景。5.2 iOS 上整段横屏全屏现象iPhone 打开页面视频只要一开始播就自动弹成系统原生播放器甚至横屏全屏用户要从播放器退出来才能看到页面。原因iOS Safari 默认把 video 当作需要全屏体验的媒体没有 playsinline 属性就会强制进播放器。解决video 标签加 playsinline。注意这个属性在标准浏览器里没有副作用可以放心全量加老安卓 WebView 里 X5 内核的写法是 x5-playsinline通常两个一起写。验收要以真机 Safari 为准开发工具模拟器经常看不出差别。5.3 视频被拉伸变形现象画面里的人或建筑变得又扁又长比例完全不对。原因video 直接写了 width: 100%; height: 100%但视频源宽高比和视口不一致浏览器默认拉伸填充。常见误用是只写 object-fit 但没写全容器的高度导致裁切越界。解决容器定高video 绝对定位然后补 object-fit: cover。我把这段固化成模板每次直接复用.video-wrap { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }这里有个容易被忽略的组合height: 100vh 在移动端浏览器地址栏收起时会跳变如果你发现页面上视频偶尔多裁一块可以把容器高度换成 100dvh动态视口单位Chrome 108 之后和 iOS 16.4 之后都支持兼容性足够日常使用。5.4 页面底部漏白或盖不住现象页面首屏底部或侧边露出一条白边或者滚动时容器高度超出视口。原因html 和 body 没设 height: 100%容器用百分比高度时拿不到参照物或者 video 高度撑满但父容器没跟随导致裁切区域不对。另一个常见原因是页面内容超过了 100vh容器被内容的高度顶开。解决html、body 先把高度和 margin 清掉容器改用 100vh/100dvhvideo 保持绝对定位加 inset: 0 撑满html, body { height: 100%; margin: 0; } .video-wrap { position: fixed; inset: 0; overflow: hidden; z-index: 0; } .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }position: fixed 是一种更稳的写法它让容器钉死在视口上不受页面滚动影响。如果视频背景下面还有正常文档流的内容容器用 fixed 并且 z-index: 0主内容区给一个更高的 z-index滚动时视频不动、内容滚动这是产品介绍页非常常见的布局形态。5.5 首页白屏卡顿现象打开页面白屏两秒以上视频是一块一块慢慢加载出来的期间点按钮没反应。原因视频文件太大preload 又是默认的 auto浏览器在解析页面时就把整个视频的下载优先级提到了很高和首屏图片、css 抢带宽。解决控制视频规格preload 改为 metadata再用第 4 章的懒加载策略延迟设置 src。如果视频已经大得没法压缩至少保证 poster 先展示用户看到的是封面而不是白屏体验就能接受。6. 进阶技巧把视频做成滚动驱动的叙事页视频背景做到后面基础的全屏自动播已经满足不了需求了。有一种很常见的进阶玩法用户滚动页面时视频跟着滚动位置前进或后退形成“页面在讲故事视频是插画”的叙事效果。很多品牌产品页用的就是这套逻辑技术实现并不复杂核心是把滚动位置映射到视频的 currentTime 上。const video document.querySelector(.bg-video); const onScroll () { const max document.documentElement.scrollHeight - window.innerHeight; const ratio window.scrollY / max; video.currentTime ratio * video.duration; }; window.addEventListener(scroll, () { requestAnimationFrame(onScroll); });逻辑很简单外层滚动距离除以总可滚动距离得到 0 到 1 的进度再乘视频总时长就是当前应该定格到的视频时间点。requestAnimationFrame 的作用是把 scroll 事件的高频触发合并成每帧一次计算避免 currentTime 赋值过于频繁导致播放卡顿。滚动驱动模式下视频不需要自动播放把 autoplay 去掉改用 preloadauto保证视频在后台加载完整滚动时才不会出现卡顿或跳帧。这个玩法的素材要求比普通视频背景高要能逐帧定位的 H.264 编码 mp4时长 10 到 30 秒为宜太长会出现拖动迟钝太短故事讲不完。另外页面需要有足够的可滚动高度通常配合几张长图或者文字区块撑出滚动空间让进度映射有足够的行程。做这种页面时我会先量一次 scrollHeight 和视口高度确认滚动行程够数再调视频节奏不然很容易出现“页面滚到头了视频还剩一半”的情况。最后提醒一个细节滚动驱动视频的页面muted 和 playsinline 还是要写的防止某些浏览器在播放时弹出系统播放器或发出声音。从那以后我每次做视频背景页面都强制走一遍“muted、playsinline、object-fit、poster”四件套再上线这条路线确实帮我少走了很多弯路。希望帮到你。本文还有配套的精品资源点击获取
