canvas+video=背景视频

你可能学过<video>和<canvas>这两个标签,那有没有想过这两个标签结合起来使用呢。其实,两个标签结合使用可以发生有趣的事情。下面来看一个简单的实例。

我们给<video>标签设置了两个属性controls和loop。controls是向用户显示控件,比如播放按钮,loop是循环播放。在<video>标签中包含3个子元素<source>,每一个引用一段不同编码格式的视频,来兼容不同的浏览器。
不知道大家有没有用过在windows桌面播放视频,有些播放器可以支持这个功能。接下来我们就用<video>和<canvas>模拟这个有趣的功能。

html和css代码:

我们让视频在浏览器中居中,并让canvas布满浏览器,把canvas元素放在前面是让他在视频的底下,来达到背景播放的效果。
js代码:

这段js代码很简单,添加一个播放事件,在canvas上画出播放时的放大画面,效果如下:
Continue reading →

css3模仿airplay播放器界面

今天给大家介绍个极小巧的绿色音乐播放器AirPlay,该播放器大小不到1M,界面华丽功能强大,无论在 XP 还是 Windows7 下都能显示华丽的半透明玻璃特效,另外还支持歌词、专辑图片下载,读取压缩文件等功能,可以说麻雀虽小,五脏俱全,是我见过的最好的音乐播放器!
我用这款播放器已经有一年多了,没有更新过,百看不厌。某天我同事说这个界面能做成网页形式也挺好的,乘空余时间,我用html5和css3模仿了它的界面。
这里用到了css3的圆角、背景渐变、阴影、动画等效果,仅兼容firefox 3.6+和chrome 10+。可以参考我以前的文章css3新增的五个属性
chrome10以下的渐变写法比较繁琐我就没写了,感兴趣话的可以参考下面给出的资料。

提示:你可以先修改部分代码再运行。

下面给出airplay官网地址,喜欢的话下载去吧:-P:http://www.podez.com/zion.php
新版地址:http://www.podez.com/index.html

参考资料:
背景渐变(CSS3 Gradient Backgrounds):http://css-tricks.com/examples/CSS3Gradient/
动画效果:http://www.w3schools.com/css3/css3_transitions.asp
CSS Border使用小分享:http://ued.taobao.com/blog/2010/08/04/css-border使用小分享/

移动互联网

最近看到开复老师在微博上发布了关于创新工场创业频道的信息,我便顺藤摸瓜探个究竟。

其中有个视频演讲吸引了我:从现实跨越到未来——互联网手机时代的创新机会

这个演讲主要是将未来移动互联网的发展,其实不看这个视频我们也能知道个大概,因为我们都在使用手机,基本上会通过手机上网,对手机的平台和应用都不会陌生,手机的更新换代速度很快,其实我们都置身于移动互联网的发展之中,不难看出它的发展趋势。

过去的智能手机由于受到平台,带宽,资费,支付,用户需求等瓶颈的限制,都不能算是真正的互联网手机。真正的互联网手机已经出现了,第一代真正的互联网手机就是Iphone和Android的手机。他们天生是为了上网和浏览互联网应用而设计的。去过手机市场的都能摸到最新的智能手机,他们的特点都是大屏幕触屏版几乎都不带键盘。我去过顺电试用过各个品牌的手机,印象最深的还是IPhone,其他的品牌的使用体验略逊Iphone。而最近上市的索尼爱立信X10i在我心中的排名第二,他使用的是Android平台。

在这里Android扮演的是一个标准的平台,他是开源的,能被所有的手机厂商使用,能支持完整的互联网标准。这样的一个平台的出现能让大大小小的手机厂商都能投入到智能机或者互联网手机的制造和生产中,这样的一个竞争态势会使智能手机的价格迅速的下来,到那时就是互联网手机的天下。

在未来5年内,网页版应用的数量将超过原生应用,这里HTML5将扮演着重要的角色。他有以下几个优点:
— HTML5能以最轻量级的代码实现互联网的富体验,而无需插件。
— 免下载,用户接入门槛低
— 一次开发,全平台部署,不受多平台开发之苦。

所以作为一个前端开发者,应该了解互联网的发展趋势,不断更新自己的知识结构才能在未来的互联网事业中处于不败之地。

HTML5 Canvas API

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和一些复杂的)动画。<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

当我们在页面中添加一个<canvas>元素时,它就在页面中创建了一个矩形区域。这个矩形区域默认宽为300px高为150px,当然,我们也可以自定义它的宽和高并设置这个元素的属性。<canvas>看起来很像<img>,唯一不同就是它不含src和alt属性。下面演示添加在HTML页面中的<canvas>元素。

Continue reading →