add some ambiance to your videos

Note: this post was originally posted to the silverorange labs blog and was written by Mike Gauthier. Mike and other people at silverorange put this demo together for the 35 days project and we thank them.

Also note that the demo below is extremely CPU-intensive. If you’re interested in the effect and you don’t have a really fast CPU you can just watch a screencast of the effect.

Last note: This demo requires Firefox 3.5 Beta99 or later.. If you have Beta 4 installed you should be able to use Help -> Check for updates… to get to the latest beta. Beta 4 included a bug where video data couldn’t be copied to the canvas.

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.


View the Demo in Firefox 3.5 Beta99 or Later


View a Screencast of the Demo (Ogg Theora, 4.1MB)
View a Screencast of the Demo (mov, h.264, 4.3MB)

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 50×50). 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;
}

About Christopher Blizzard

Making the web better, one release at a time.

More articles by Christopher Blizzard…


10 comments

  1. Anita

    Thank you so much for adding the screencast so that those of us who have not yet made the change to 3.5 can share in the adventure.

    June 9th, 2009 at 05:33

  2. […] some ambiance to your videos: http://hacks.mozilla.org/2009/06/add-ambiance-to-your-videos/ […]

    June 9th, 2009 at 06:38

  3. Auren

    Works too slow for me. Maybe because it’s beta.

    June 9th, 2009 at 19:51

  4. […] 原文地址:add some ambiance to your videos […]

    June 10th, 2009 at 00:24

  5. […] 為影片添點情調,我略譯一下: […]

    June 10th, 2009 at 11:16

  6. […] add some ambiance to your videos […]

    June 11th, 2009 at 05:56

  7. Mike

    Wow. The nightly version i’m using is great! The video seems a little choppy, but i think its the video honostly, its hardly noticable but that might be the affect the JS has on the page or soemthing. None the less, the ambient change i think is only after a substantial change and it works wonderfully. This is a GENIUS idea.

    June 11th, 2009 at 10:05

  8. J. McNair

    Those with older computers:

    I’m running an older Athlon box on a nice monitor and the demo was choppy at 1920 x 1080.

    BUT I used Ctrl – to shrink the page and video frame a little and it was smooth as butter. Lowering desktop resolution helps too.

    Thus I was very impressed.

    June 16th, 2009 at 20:09

  9. […] World Map of Social Network Dominance Looks like MySpace doesn’t dominate anything… And facebook is being used all over the world… http://flowingdata.com/2009/06/08/world-map-of-social-network-dominance/ Awesome new things that can be done by Firefox 3.5 (all native, without plugins) Content Aware Image Resizing http://hacks.mozilla.org/2009/06/content-aware-image-resizing/ Blink detection http://ajaxian.com/archives/finally-a-useful-blink-tag-detecting-your-user-blinking Video & masks inside the browser, the mask is added afterward using css&javascript: http://hacks.mozilla.org/2009/06/add-ambiance-to-your-videos/ […]

    June 26th, 2009 at 00:23

  10. […] 原文地址:add some ambiance to your videos […]

    July 7th, 2009 at 23:30

Comments are closed for this article.