网站建设
 
设为首页 访问新版
用户ID/邮箱: 密 码:
网站建设资讯 News 您目前的位置:网站建设 >> 网站建设资讯 >> 网页设计 >> 一个很*酷*的思路-  

一个很*酷*的思路-用*视频*作为*网页背景*(转自站长之家)

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

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

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

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

CSS代码

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

<video autoplay loop poster="wwwyanetcn.jpg" id="bgvid">
<source src="wwwyanetcn.webm" type="video/webm">
<source src="wwwyanetcn.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(wwwyanetcn.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 { display: block; }
有了这句代码,IE8至少能识别<video>标记,可以正确的显示背景图片。

使用JavaScript实现视频背景

尽管使用HTML5/CSS3实现视频背景要比使用JavaScript好一些,但不妨说一下,有一些jQuery插件和JavaScript工具包也能达到视频背景的效果。


上一条: 简单分析下HTML5中缩略词标记的重要作用
下一条:
网页设计相关文章
一个很*酷*的思路-用*视频*作为*网页背景*(转自站长之家)
简单分析下HTML5中缩略词标记的重要作用
html5技术能取代Flash技术成为主流吗?
网站建设代码之站内搜索引擎代码分享
一个可以在浏览器标题栏显示的网站建设时间代码
FTP是什么?在网站设计中有什么意义?
如何选择好的论坛发外链
屏蔽页面快捷键
分享:相对定位和绝对定位
如何批量替换超链接标签?
网站建设套餐
网站优化(网站推广)
域名注册
虚拟主机
企业邮局
软件开发
相关资讯 Other News
快速导航 Fast Navigation
网站建设投诉建议
投诉建议
网站建设客户服中心
客服中心
网站建设付款中心
付款方式
网站优化中心
网站优化
网站建设套餐
网站建设

网站价值

轻松一刻
站长工具
站长工具

积分兑换
网站首页关于我们业务范围新闻资讯成功案例客服中心联系我们网站建设网站优化付款帐户
文档下载 网站建设服务协议 | 网站建设报价 | 网站备案资料 | 网页设计软件 | PhotoShop(图片处理) | FTP网页上传/下传软件 | 营销式网站优化
深圳网站建设公司专业提供各种营销型网页设计\网站优化\深圳网站建设服务... 【老字号】、广州、东莞、深圳网站建设 | 网站建设网页特效 | 企业网站(官网)
网站建设 | 网页设计 | 深圳网站优化 | 网站地图 | 专业的深圳网站建设,深圳网站优化,网页设计,网站设计开发团队 | 网站建设源码下载
COPYRIGHT(C) 2005-2018 亚网互联·中国 版权所有 ALL RIGHTS RESERVED  ( 粤ICP备05052556号 ) 来访IP:54.166.232.243
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦15楼 1529-1531 室     E-Mail:sales@yanet.cn   web@yanet.cn  
公司电话:0755-89812581(8线)   4006-800535
深圳市博士通科技有限公司 深圳网站建设常年法律顾问:朱运德律师