Our work with Mozilla led us to do some experiments on what can be done with the new HTML5 functionality in Firefox 3.5. With <canvas> and the new HTML5 <video> element, we created a demo that pulls color information out of a live playing video and uses it to style a border around the video. The result is not unlike the tackiest of back-lit LCD tvs.
Add some Ambiance with Firefox 3.5
How It Works
The color calculation is done by drawing video frames to a HTML5 canvas element and then computing the average color of the canvas. To make computing the average color faster, the video frame is resampled onto a smaller canvas (this demo uses 50x50). Color accuracy can be improved at the cost of speed by using a larger canvas. Pushing video frames to the canvas is done as follows:
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);
The computed color is then changed over time using a YUI animation.
The edges of the video are feathered using an SVG mask. Firefox 3.5 allows SVG masks to be applied to elements using a special CSS+SVG property. First, an SVG mask is defined inline in the document (note: this could also be defined externally). The mask is then applied to the video element using the following CSS rule:
#video {
mask: url(index.html#m1);
}
There are two of other CSS+SVG properties available in FF3.5: clip-path and filter. To reference SVG styles in CSS use url(filename#element-id) or just url(#element-id) if the SVG is defined in the same file as the CSS.
Finally, the demo uses some new HTML CSS 3.0 features from Firefox 3.5. The box-shadow property, text-shadow property and rgba color model are used:
#main-feature {
-moz-box-shadow: #000 0px 5px 50px;
}
#description {
text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 2px;
}

Comments
Srihari Padmanabhan - July 20, 2009 11:20 am
Wow. That's something i never knew was possible with Firefox. Does this feature also work for embedded video or flash content ?
chandan - July 21, 2009 5:29 am
really a small tiny aps :) very informative FF tweek
jokes - July 21, 2009 5:30 am
is there any memory leakage problem with this tips ?
Jonas - July 21, 2009 10:25 am
Why it doesn't work at my firefox?
there is any error appear.
Educational Technology - July 21, 2009 12:28 pm
I love these kind of firefox tips. Thank You
Education - July 21, 2009 12:42 pm
Great tips. Thanks