使用视频作为网页背景的技术探讨
2016-07-16 13:06
447 查看
使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的
观看演示1
在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚:
并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很酷就使用它。
作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音;事实上,视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
背景视频应该有个替代图片,当浏览器不支持这种HTML5技术、视频格式时用图片替代。在等待背景视频加载的过程中也应该使用背景图片占位。而对于一些手机移动设备不支持视频自动播放,也应该使用图片替代。
视频长度很重要:太短了会明显感到重复播放(背景视频通常情况是重复播放的),太长就变成了情节叙事,如果这样,这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
带宽是个大问题。视频的体积应很小,尽量的压缩。同时,它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能,应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。背景视频最好小于5M,如果你小于500K,那是更好。
对上面说的这些情况心里要有数,下面我们来看看技术实现上的细节。
使用HTML5里播放视频的代码方法视频:
注意:这里摆放视频格式的顺序很重要,因为有些版本的谷歌浏览器里,如果
我们使用视频的第一帧图像作为视频的封面图片,这样,当背景视频一旦加载完成,我们可以看到很流畅的从图片过度到背景视频播放。
让视频扩展到全屏的方法:
一些老式的浏览器无法播放这种格式的视频,但它们仍然识别
你可能会发现,在手机设备上,
IE8不仅不能识别
在你的CSS代码里做如下的声明,让IE知道
有了这句代码,IE8至少能识别
尽管使用HTML5/CSS3实现视频背景要比使用JavaScript好一些,但不妨说一下,有一些jQuery插件和JavaScript工具包也能达到视频背景的效果。下面是几个演示:
观看演示2
观看演示3
如果一个网站上使用了视频背景,那会变得相当的酷,但是,“能力越大,责任越大”,请审慎明智的使用。
(英文:Create
Fullscreen HTML5 Page Background Video.)
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.)
相关文章推荐
- 买视频送图书-五月活动
- DVI 视频接口图文解析
- C#实现语音视频录制-附demo源码
- 编写C++程序使DirectShow进行视频捕捉
- AnyChat的视频会议程序实例详解
- C#调用mmpeg进行各种视频转换的类实例
- C#获取视频某一帧的缩略图的方法
- jQuery通过写入cookie实现更换网页背景的方法
- 基于jQuery的网页影音播放器jPlayer的基本使用教程
- 显示youtube视频缩略图和Vimeo视频缩略图代码分享
- JS操作CSS随机改变网页背景实现思路
- PHP使用ffmpeg给视频增加字幕显示的方法
- PHP实现将视频转成MP4并获取视频预览图的方法
- C++实现优酷土豆去视频广告的方法
- PHP简单获取视频预览图的方法
- asp.net 页面中添加普通视频的几种方式介绍
- php截取视频指定帧为图片
- Mac OS下为Android Studio编译FFmpeg解码库的详细教程
- Android获取SD卡上图片和视频缩略图的小例子
- php使用memcoder将视频转成mp4格式的方法