注意：这篇文章最初发布在 silverorange 实验室博客 上，作者是 Mike Gauthier。Mike 和 silverorange 的其他人员为 35 天项目制作了这个演示，我们感谢他们。

另请注意，下面的演示非常占用 CPU。如果您对效果感兴趣，但 CPU 速度不快，可以观看效果的屏幕录制。

最后一点：此演示需要 Firefox 3.5 Beta99 或更高版本。如果您安装了 Beta 4，则可以使用“帮助” -> “检查更新...”获取最新 Beta 版本。Beta 4 中存在一个错误，导致无法将视频数据复制到画布。

我们在与 Mozilla 的合作中，对 Firefox 3.5 中新的 HTML5 功能可以实现的功能进行了一些实验。利用 <canvas> 和新的 HTML5 <video> 元素，我们创建了一个演示，该演示从正在播放的视频中提取颜色信息，并使用它来设置视频周围边框的样式。结果与最俗气的背光液晶电视非常相似。

工作原理

颜色计算是通过将视频帧绘制到 HTML5 canvas 元素，然后计算画布的平均颜色来完成的。为了加快平均颜色计算速度，视频帧会被重新采样到一个较小的画布上（此演示使用 50×50）。通过使用较大的画布，可以提高颜色精度，但会降低速度。将视频帧推送到画布上的操作如下所示

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 蒙版应用于元素。首先，在文档中内联定义 SVG 蒙版（注意：也可以在外部定义）。然后，使用以下 CSS 规则将蒙版应用于 video 元素

#video {
    mask: url(index.html#m1);
}

FF3.5 中还有其他两个可用的 CSS+SVG 属性：clip-path 和 filter。要在 CSS 中引用 SVG 样式，请使用 url(filename#element-id) 或仅使用 url(#element-id)（如果 SVG 在与 CSS 相同的文件中定义）。

最后，演示使用 Firefox 3.5 中的一些新的 HTML 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;
}