使用视频作为网页背景很酷，但也很困难。 CSS 中的background-image 属性只能使用图像、SVG、颜色或渐变。但是从网站制作技术的角度来说，我们可以伪造一个效果，让视频作为背景出现在其他HTML元素的后面。这里的难点在于视频会填满整个浏览器页面，并响应浏览器窗口大小的变化。

观看演示1

视频作为网页背景的限制因素

在手工实现编码之前，我们需要考虑视频作为网页背景的一些问题：

这不仅仅是因为技术上可以随心所欲地使用它：背景视频内容必须增强页面内容，而不仅仅是因为它漂亮或技术上很酷。

背景视频应设置为自动播放，默认关闭声音；事实上，视频最好不要有声音。 （您可以在页面上放置一个按钮来控制声音。）

背景视频要有替代图片，当浏览器不支持此HTML5技术和视频格式时，用图片代替。在等待加载背景视频时，还应使用背景图像占位符。对于一些不支持自动播放视频的移动设备，也应该使用图片代替。

视频的长度很重要：如果太短，显然会重复播放（背景视频通常会重复播放），如果太长，则会成为剧情叙述。如果是这样，该视频应该单独在页面上播放。我建议视频长度在12-30秒之间。

带宽是个大问题。视频的尺寸要小，尽量压缩。同时需要在不同尺寸的设备上自动适配屏幕尺寸。如果可能，应使用JavaScript 控件为不同的屏幕尺寸加载不同分辨率的背景视频。背景视频最好小于5M，小于500K就更好了。

上面提到的几种情况大家一定要清楚，下面我们来看一下技术实现的细节。

CSS代码

使用代码方法video在HTML5中播放视频：

注意：此处视频格式的排列顺序很重要，因为在某些版本的谷歌浏览器中，如果将.webm 格式的视频放在其他视频的后面，则该视频将无法播放。

我们使用视频的第一帧图像作为视频的封面图像，这样一旦加载了背景视频，我们就可以看到从图像到背景视频的平滑过渡。

如何将视频扩展到全屏：

视频#bgvid {

固定位置：右： 0；底部： 0；

最小宽度： 100%；最小高度： 100%；

宽度： 自动； height: 自动； z-index: -100;

background: url(polina.jpg) 不重复；

背景尺寸： 封面；

}

一些较旧的浏览器无法播放这种格式的视频，但它们仍然可以识别

标记（IE8/6 除外）。对于这些浏览器，我们使用background-image 来弥补对它们的支持不足，使用的图像是视频的封面图。

您可能会发现在您的移动设备上，

标记不能缩放到全屏，因为这些设备的屏幕纵横比限制了视频的扩展。我将在以后的文章中继续探讨这个问题。

IE 8上的视频后台技术问题

不仅IE8无法识别

标签，它不能识别所有HTML5 标记，这是一个问题，对于IE8，我们至少让备用背景图像显示出来。为此，我们需要两件事：一行JavaScript 代码和一条CSS 条件注释语句。

在你的CSS 代码中做如下声明让IE 知道

视频{ display: 块； }

有了这段代码，IE8至少可以识别

标记，背景图像可以正确显示。

使用JavaScript 的视频背景

虽然使用HTML5/CSS3实现视频背景比使用JavaScript要好，但值得一提的是，有一些jQuery插件和JavaScript工具包也可以实现视频背景的效果。

综上所述

如果在网站上有视频背景会很酷，但“能力越大责任越大”，请谨慎使用。

我们专注高端建站，小程序开发、软件系统定制开发、BUG修复、物联网开发、各类API接口对接开发等。十余年开发经验，每一个项目承诺做到满意为止，多一次对比，一定让您多一份收获！