如何让视频做成网页背景

 

观看演示1

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

在动手编码实现前，视频作为网页背景的有些问题我们要先考虑清楚：

■并不是因为技术上可行你就可以任意使用：作为背景的视频内容必须能增强页面内容的感染力，而不是因为漂亮或技术上很酷就使用它。
■作为背景的视频应该设置为自动播放，而默认状态下应该是关闭声音；事实上，视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
■背景视频应该有个替代图片，当浏览器不支持这种HTML5技术、视频格式时用图片替代。在等待背景视频加载的过程中也应该使用背景图片占位。而对于一些手机移动设备不支持视频自动播放，也应该使用图片替代。
■视频长度很重要：太短了会明显感到重复播放(背景视频通常情况是重复播放的)，太长就变成了情节叙事，如果这样，这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
■带宽是个大问题。视频的体积应很小，尽量的压缩。同时，它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能，应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。背景视频最好小于5M，如果你小于500K，那是更好。

对上面说的这些情况心里要有数，下面我们来看看技术实现上的细节。

CSS代码
使用HTML5里播放视频的代码方法视频：

注意：这里摆放视频格式的顺序很重要，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。

我们使用视频的第一帧图像作为视频的封面图片，这样，当背景视频一旦加载完成，我们可以看到很流畅的从图片过度到背景视频播放。

让视频扩展到全屏的方法：
video#bgvid {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto;z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover;

}

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