一些门户网站采用视频作为网页背景，具有很好的展示效果，而随着HTML5技术的发展和浏览器支持程序的提升，采用视频作为网页背景也变得越来越容易。

技术分析

CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。

视频作为网页背景，需要考虑一下这几个问题：

作为背景的视频应该设置为自动播放(set to autoplay)，而默认状态下应该是关闭声音(视频里面最好不含声音)。

背景视频应该有个替代图片，当浏览器不支持这种HTML5技术、视频格式时用图片替代。

视频长度很重要(12-30秒之间)。

视频的体积应很小，尽量的压缩。同时，它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能，应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。

视频格式

当前，video 元素支持三种视频格式：

Format

IE

Firefox

Opera

Chrome

Safari

Ogg

No

3.5+

10.5+

5.0+

No

MPEG4

9.0+

No

No

5.0+

3.0+

WebM

No

4.0+