澳门银河线上官网-澳门银河网址¥平台*官网

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

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

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

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

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

                          并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很酷就使用它。
                          作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音;事实上,视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
                          背景视频应该有个替代图片,当浏览器不支持这种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(wwwyanetcn.jpg) no-repeat;
                          background-size: cover;
                          }
                          一些老式的浏览器无法播放这种格式的视频,但它们仍然识别

                          你可能会发现,在手机设备上,

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

                          IE8不仅不能识别


                          在你的CSS代码里做如下的声明,让IE知道

                          video { display: block; }
                          有了这句代码,IE8至少能识别

                          使用JavaScript实现视频背景

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


                          上一条: 简单分析下HTML5中缩略词标记的重要作用
                          下一条:
                          网站建设套餐
                          网站优化(网站推广)
                          域名注册
                          虚拟主机
                          企业邮局
                          相关资讯 Other News
                          首页关于我们业务范围新闻资讯成功案例客服中心联系我们网站建设网站优化付款帐户
                          COPYRIGHT(C) 2005-2019 亚网互联·中国 版权所有 ALL RIGHTS RESERVED (粤ICP备15005241号)
                          深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦15楼 1529-1531 室   E-Mail:web@yanet.cn
                          公司电话:jty9999.com(8线)  
                          深圳市亚网科技有限公司 深圳网站建设常年法律顾问:朱运德律师
                          營銷型網站