使用视频作为网页背景
使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。
观看演示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;
}
一些老式的浏览器无法播放这种格式的视频，但它们仍然识别标记(除了IE8/6)。对于这些浏览器，我们使用了background-image来弥补它们的不支持，使用的图片就是视频的封面图片。
你可能会发现，在手机设备上，标记是无法扩展到全屏的，因为这些设备的屏幕长宽比限制了视频的扩展。我在以后的文章里了会继续探讨这个问题。
视频背景技术在 IE 8 上的问题
IE8不仅不能识别标记，它对所有的HTML5标记都不能识别，这是一个问题，对于IE8，我们至少要让替代的背景图片能显示出来。为了达到这个目的，我们需要两件事情：一行JavaScript代码，一个CSS条件判断注释语句。
在你的CSS代码里做如下的声明，让IE知道是一个block元素：
video{display:block;
}
【使用视频作为网页背景】有了这句代码，IE8至少能识别标记，可以正确的显示背景图片。
使用JavaScript实现视频背景
尽管使用HTML5/CSS3实现视频背景要比使用JavaScript好一些，但不妨说一下，有一些jQuery插件和JavaScript工具包也能达到视频背景的效果。下面是几个演示：
观看演示2
观看演示3
结论
如果一个网站上使用了视频背景，那会变得相当的酷，但是，“能力越大，责任越大”，请审慎明智的使用。
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- 4月23日海军节，我在青岛等你，一起看强大的中国海军。（如图如视频）
- 视频转换器哪种好用（）