黑基Web安全攻防班
安基网 首页 IT技术 电脑技术 查看内容

HTML5视频背景:视频在网页中运用的新形式

2014-9-28 13:46| 投稿: computer

摘要: HTML5视频背景:视频在网页中运用的新形式看了这个网站的首页有感:http://www.cloudways.com/en/不得不说,这个将视频充当页面背景元素的运用方法略吊,上一次看到这种用法不知道...
HTML5视频背景:视频在网页中运用的新形式看了这个网站的首页有感:http://www.cloudways.com/en/不得不说,这个将视频充当页面背景元素的运用方法略吊,上一次看到这种用法不知道是在哪部好莱坞电影的印象站中,另外好像还有纽约时报的雪崩专题。说说这从这个页面学到的技巧吧:1. HTML5视频循环播放直接上代码吧,非常简单,值得注意的是为IE 9做了fallback降级处理。至于IE9以下,估计就不适配了。<div class="hm-nw-bnr-vid"> <div class="hm-nw-bnr-bk"></div> <video autoplay loop preload="auto" style="width:100%;"> <source src="http://s3.amazonaws.com/cloudways-website-videos/Home.mp4"> <!--[if LT IE 9]> <object type="application/x-shockwave-flash" data="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" width="100%" height="770"> <param name="movie" value="http://flashfox.googlecode.com/svn/trunk/flashfox.swf"> <param name="allowFullScreen" value="true"> <param name="wmode" value="transparent"> <param name="flashVars" value="autoplay=true&controls=false&loop=true&poster=http%3A%2F%2Fwww.cloudways.com%2Ftemplate%2Fdefault%2Fimg%2Fimg-new%2Fhome_bg.jpg&src=http%3A%2F%2Fs3.amazonaws.com%2Fcloudways-website-videos%2FHome.mp4"> </object> <![endif]--> </video> </div>这里的技巧是,HTML5 video元素自适应整个页面宽度作为背景,但它其实是作为中间层,还有两层背景像三明治一样把它夹在中间。前面的一层半透明背景,作用是让上面的文字更清晰可辨,另外还可以掩饰视频拉伸所造成的模糊(不过视频本身的尺寸也达到1280×720,所以拉伸造成的模糊在可补救的范围内),甚至给人一种朦胧美,感觉最妙的技巧就是这个了。video其下面还有一个图片背景,其实就是视频的第一帧,作用是缓冲时的替代显示。2. 视频的尺寸和大小在这个页面中顶部和底部各用了一个视频背景,顶部的为1.5M,底部为1.06M,在目前的带宽情况下不算什么事,页面其他的元素加起来也差不多2M了。顶部视频的尺寸是1280×720,底部的尺寸是852×480,时长都在半分钟左右,所以视频尽量找清晰、尺寸大的,不过能够把大小控制得这么小,一个是视频压制的技巧,格式为H264的mp4,另一个是视频本身的缘故,尽量选动作少的,这点我记得有个摄影师叫Jamie Beck擅长做GIF摄影,差不多一个意思,大家可以去找找看。GIF摄影大多都是无缝循环的,这里的视频最好也能无缝循环播放,不要让用户感到切换和卡顿。这个例子里面还不是完全无缝,不过在可接受的范围内。3. 最后,为什么要用视频背景其实就简单的一句话:动态的美啊!我之所以写这篇文章正因为看到底部视频里的印度客服妹子,那叫一个妖娆啊,果断的扒下来并写文纪念。。这妹子让我想起之前看的美剧《Outsourced(外包公司)》,怀念啊~~以后有机会也一定要尝试下视频背景,也希望大家能从中研究出更多的用法。

小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!



免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

最新

返回顶部