原文地址：add some ambiance to your videos
系列地址：颠覆网络35天
====================================
注意：这篇文章本来发表在 silverorange实验室博客上并且原作者为Mike Gauthier。Mike和其他在silverorange的朋友把这个演示提供给我们35天的项目中，我们很感谢他们。
同样需要注意的是，下面这个演示会非常占用CPU。如果您对这个效果非常感兴趣但是又没有一颗非常强劲的CPU的话，您可以查看该效果的视频。
最后需要注意的是：这个演示需要Firefox 3.5 Beta99或者更高的版本。如果您已经安装了Beta 4，您应该可以选择“帮助”菜单，然后选择“查找更新”来获取最新的测试版本。Beta 4中有一个Bug不能拷贝视频的数据到Canvas上。
我们同Mozilla进行的工作使得我们可以在Firefox 3.5中实验全新的HTML5功能究竟可以做写什么事情。使用<canvas>和全新HTML5的<video>元素，我们制作了一个演示可以把正在播放的视频中的颜色数据抽取出来并构造一个特殊效果的视频边框。结果基本相同于背光液晶电视的效果。
怎么做到的呢？
颜色的计算是通过把视频帧画到HTML5的Canvas元素上然后计算出Canvas上颜色的平均值。为了更快的计算平均颜色值，视频帧被抽样到一个小一些的Canvas上（这个演示中使用50×50大小的）。如果使用更大一些的Canvas并不担心性能的话，可以提升颜色计算值的精度。把视频帧画到Canvas上可以通过下面的代码做到：
var canvas = document.getElementById(‘canvas’);
var video = document.getElementById(‘video’);
var context = canvas.getContext(‘2d’);
// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);
然后计算后的颜色值使用YUI 动画组件不停的变化。
视频的边缘部分使用SVG蒙板特性被提取出来。Firefox 3.5通过使用CSS+SVG属性可以把SVG蒙板应用到任何元素上。首先，在HTML文档中定义SVG蒙板（当然也可以在外部文件中定义）。然后使用下面的CSS规则把蒙板应用到视频元素上：
#video {
mask: url(index.html#m1);
}
在Firefox 3.5中还有另外两个CSS+SVG属性：clip-path和filter。在CSS中引用SVG风格使用url(filename#element-id)，或者如果SVG跟CSS使用同一个文件的话可以直接使用url(#element-id)。
最后，这个演示使用在Firefox 3.5中提供的一些新的CSS 3.0特性。包括box-shadow属性、text-shadow属性和RGBA颜色模型：
#main-feature {
-moz-box-shadow: #000 0px 5px 50px;
}
#description {
text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 2px;
}