使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image
属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面,而且要响应浏览器窗口大小的变化。
视频作为网页背景的限制因素
在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚:
- 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很酷就使用它。
- 作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音;事实上,视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
- 背景视频应该有个替代图片,当浏览器不支持这种HTML5技术、视频格式时用图片替代。在等待背景视频加载的过程中也应该使用背景图片占位。而对于一些手机移动设备不支持视频自动播放,也应该使用图片替代。
- 视频长度很重要:太短了会明显感到重复播放(背景视频通常情况是重复播放的),太长就变成了情节叙事,如果这样,这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
- 带宽是个大问题。视频的体积应很小,尽量的压缩。同时,它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能,应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。背景视频最好小于5M,如果你小于500K,那是更好。
对上面说的这些情况心里要有数,下面我们来看看技术实现上的细节。
CSS代码
使用HTML5里播放视频的代码方法视频:
Related Posts
-
【漫画详解】用iframe障眼法,骗取用户点击做过Web开发的朋友曾经都有过这么个念头:在自己的页面里内嵌一个其他网站的网页,然后可以用脚本去获取他们页面里的信息,甚至可以。。。 显然,有这么好的事也肯定轮不到你来尝了:)一个叫沙箱模型的东西被发明出来,就是防止有这种想法的人搞破坏。。。所以现在的我们只能远观,不可亵玩也。 不过,这些规定只是针对脚本而已。假如让用户自己乖乖的去点,那当然是没问题的。但有多少人会去点呢!! 所以,我们需要施一些特殊的障眼法,让用户在不经意间,就点了我们想让他点的东西:) 就拿上面那个来说吧,如果直接把这个大页面赤果果的硬塞进网页,无论你怎么提示他点,或者说多少好话,大家见了就烦,就是不点:) 所以说,我们必须得修饰修饰,不然人家见了就吓跑了。首先也是最关键的就是这身材问题,突然冒出个这么肥硕的一个页面,看的人眼花缭乱,不知道 发送什么情况啦。我们要好好修剪一下,把没用的部分统统去掉,只留下我们想要的“精华”。这个简单,只要把框架先放到一个层里面,然后把层的尺寸固定好,…
移动前端工作的那些事---前端制作篇之框架篇为了更好的提升用户体验,移动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点: 一、Sencha Touch框架是一个重量级的框架、它上手较难,代码复杂,并且需要较强的程序基础才能学习,最开始的时候因为一个项目,想使用Sencha Touch框架,后来工期实在太紧张,根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高,运行起来的速度一般,需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。 二、JQTouch是一个轻量级框架、纯jquery写法,上手比较容易,代码容易理解,加载速度也很快,缺点是配合的移动端效果插件较少,需要很多外部的插件相结合,另外,个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。 三、Jquery-moblie也是一个轻量级框架、纯jquery写法,上手容易,代码容易理解,但由于其绑定的前端效果插件过多,且代码结构有些臃 肿,造成加载速度很慢。尤其是在android系统上测试,速度很慢。用户体验效果不太好,它比较适合开发IPAD或是IOS系统的高端机型。 四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化,更有利于在移动设备上进行应用,并且速度很流畅。上手也比较容…
-
当浏览器默认禁用第三方cookie前一阵子,我们发现高版本的Safari中默认会阻止第三方cookie,如下图所示。 问题 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站X(网站X的域名与网站A的域名不同)的资源, 这时这个网站X就被认为是第三方。需要注意的是,这儿区分不同网站的标准是域名是否相同,而不是这两个网站是否由同一个公司运营。比 如,taobao.com和tmall.com被认为是两个网站,尽管它们都属于阿里集团。 在网站建设中,使用第三方资源非常常见,大多数据情况下,这并不会带来问题。不过有时候,我们可能希望能读写这个第三方域下的cookie,这时问题就来了。 …