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

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

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

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

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

                                                      并不是因为技术上可行你就可以?#25105;?#20351;用:作为背景的视?#30340;?#23481;必须能增强页面内容的感染力,而不是因为漂亮或技术上很酷就使用它。
                                                      作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音;事实上,视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
                                                      背景视频应该有个替代?#35745;变?#35272;器不支持这种HTML5技术、视频格式时用?#35745;?#26367;代。在等待背景视频加载的过程中也应该使用背景?#35745;?#21344;位。而对于一些?#21482;?#31227;动设备不支持视频自动播放,也应该使用?#35745;?#26367;代。
                                                      视频长度很重要:太短了会明显感到重复播放(背景视频通常情况是重复播放的),太长就变成了情节叙事,如果这样,这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
                                                      带宽是个大问题。视频的体积应很小,尽量的压缩。同时,它需要在不同尺寸设备上自动的?#35270;?#23631;幕大小。如果有可能,应该使用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格式的视频放在了其他视频后面,视频将无法播放。

                                                      我们使用视频的第一帧图像作为视频的封面?#35745;?#36825;样,当背景视频一旦加载完成,我们可以看到很流畅的从?#35745;?#36807;度到背景视频播放。

                                                      让视频扩展到全屏的方法:

                                                      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来弥补它们的不支持,使用的?#35745;?#23601;是视频的封面?#35745;?/FONT>

                                                      你可能会发现,在?#21482;?#35774;备上,<video>标记是无法扩展到全屏的,因为这些设备的屏幕长宽比限制了视频的扩展。我在以后的文章里了会继续探讨这个问题。

                                                      视频背景技术在 IE 8 上的问题

                                                      IE8不仅不能识别<video>标记,它对所有的HTML5标记都不能识别,这是一个问题,对于IE8,我们至少要让替代的背景?#35745;?#33021;显示出来。为了达到这个目的,我们需要两件事情:一行JavaScript代码,一个CSS条件判断注释语句。  

                                                      <!--[if lt IE 9]>  
                                                      <script>    
                                                      document.createElement('video');  
                                                      </script>  
                                                      <![endif]-->
                                                      在你的CSS代码里做如下的声明,让IE知道

                                                      video { display: block; }
                                                      有了这句代码,IE8至少能识别<video>标记,可以正确的显示背景?#35745;?/FONT>

                                                      使用JavaScript实现视频背景

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


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

                                                      网站价值

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

                                                      积分?#19968;?/td>
                                                      网站首页关于我们业务?#27573;?/a> | 新闻资讯成功案例客服中心联系我们网站建设网站优化付款帐户
                                                      文档下载 网站建设服务协议 | 网站建设报价 | 网站备案资料 | 网页设计软件 | PhotoShop(?#35745;?#22788;理) | FTP网页上传/下传软件 | 营销式网站优化
                                                      深圳网站建设公司专业提供各种营销型网页设计\网站优化\深圳网站建设服务... 【老字号】、广州、东莞、深圳网站建设 | 网站建设网页特效 | 企业网站(官网)
                                                      网站建设 | 网页设计 | 深圳网站优化 | 网站地图 | 专业的深圳网站建设,深圳网站优化,网页设计,网站设计开发团队 | 网站建设源码下载
                                                      COPYRIGHT(C) 2005-2018 亚网互联·中国 版权所有 ALL RIGHTS RESERVED  (  粤ICP备15005241号 ) 来访IP:148.163.114.51
                                                      深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦15楼 1529-1531 室     E-Mail:[email protected]   [email protected]  
                                                      公司电话:0755-89812581(8线)   4006-800535
                                                      深圳市博士通科技有限公司 深圳网站建设常年法律顾问:朱?#35828;?#24459;师
                                                      四川金7乐18061809期

                                                                                                                                                              重庆时时021路 黑龙江新时时彩走势图表 辽宁麻将苹果下载安装 1分钟赛车怎么玩比较稳 梭哈的钱不对等 排列三销售额乐彩网 重庆时时彩新版本 黑龙江时时彩走势表 重庆时时全天个位计划软件 Ⅱ选5开奖结果江苏 西甲排名 四川时时vv平台 内蒙古十一选五近期冷号 二十一点怎么玩 最新电玩送分20万金币 广东时时11选5