使用视频作为网页背景是件很酷的事情, 但也是件困难的事情. CSS 里的 background-image 属性只能使用图片, SVG, 颜色或渐变色. 但从技术讲, 我们是可以伪造出一种效果, 让视频以背景的角色出现在其它 html 元素后面. 这其中的难点是视频要填充整个浏览器页面, 而且要响应浏览器窗口大小的变化.
观看演示 1
视频作为网页背景的限制因素
在动手编码实现前, 视频作为网页背景的有些问题我们要先考虑清楚:
并不是因为技术上可行你就可以任意使用: 作为背景的视频内容必须能增强页面内容的感染力, 而不是因为漂亮或技术上很酷就使用它.
作为背景的视频应该设置为自动播放, 而默认状态下应该是关闭声音; 事实上, 视频里面最好不含声音.(你可以在页面上放置一个控制声音的按钮.)
背景视频应该有个替代图片, 当浏览器不支持这种 HTML5 技术, 视频格式时用图片替代. 在等待背景视频加载的过程中也应该使用背景图片占位. 而对于一些手机移动设备不支持视频自动播放, 也应该使用图片替代.
视频长度很重要: 太短了会明显感到重复播放 (背景视频通常情况是重复播放的), 太长就变成了情节叙事, 如果这样, 这段视频应该单独放到页面上播放. 我建议视频的长度应该是 12-30 秒之间.
带宽是个大问题. 视频的体积应很小, 尽量的压缩. 同时, 它需要在不同尺寸设备上自动的适应屏幕大小. 如果有可能, 应该使用 JavaScript 控制对不同的屏幕大小加载不同分辨率的背景视频. 背景视频最好小于 5M, 如果你小于 500K, 那是更好.
对上面说的这些情况心里要有数, 下面我们来看看技术实现上的细节.
CSS 代码
使用 HTML5 里播放视频的代码方法视频:
- <video autoplay loop poster="polina.jpg" id="bgvid">
- <source src="polina.webm" type="video/webm">
- <source src="polina.mp4" type="video/mp4">
- </video>
注意: 这里摆放视频格式的顺序很重要, 因为有些版本的谷歌浏览器里, 如果. 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;
- }
一些老式的浏览器无法播放这种格式的视频, 但它们仍然识别 < video > 标记 (除了 IE8/6). 对于这些浏览器, 我们使用了 background-image 来弥补它们的不支持, 使用的图片就是视频的封面图片.
你可能会发现, 在手机设备上,<video > 标记是无法扩展到全屏的, 因为这些设备的屏幕长宽比限制了视频的扩展. 我在以后的文章里了会继续探讨这个问题.
视频背景技术在 IE 8 上的问题
IE8 不仅不能识别 < video > 标记, 它对所有的 HTML5 标记都不能识别, 这是一个问题, 对于 IE8, 我们至少要让替代的背景图片能显示出来. 为了达到这个目的, 我们需要两件事情: 一行 JavaScript 代码, 一个 CSS 条件判断注释语句.
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
在你的 CSS 代码里做如下的声明, 让 IE 知道 < video > 是一个 block 元素:
video { display: block; }
有了这句代码, IE8 至少能识别 < video > 标记, 可以正确的显示背景图片.
使用 JavaScript 实现视频背景
尽管使用 HTML5/CSS3 实现视频背景要比使用 JavaScript 好一些, 但不妨说一下, 有一些 jQuery 插件和 JavaScript 工具包也能达到视频背景的效果. 下面是几个演示:
观看演示 2 观看演示 3
结论
如果一个网站上使用了视频背景, 那会变得相当的酷, 但是,"能力越大, 责任越大", 请审慎明智的使用.
(英文: Create Fullscreen HTML5 Page Background Video.)
来源: http://www.webhek.com/post/video-background.html