Adds backlight to a Video element using Canvas and CSS3
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
backlight5.js

README.md

Experimental backlight for HTML5 video using canvas and CSS3 transitions

Live Demo

http://lostsource.com/2012/12/30/backlight-html5-video.html

Usage

Assuming this is your markup:

<video id="someMovie" width="480" height="264">
	<source src="movie.ogv" type='video/ogg'/>
	<source src="movie.webm" type='video/webm'/>
	<source src="movie.mp4" type='video/mp4'/>
</video>

Include backlight5.js in your page and add the following line

var backlight = Backlight5(document.getElementById('someMovie'));

Settings can be modified at runtime

// ammount of 'leds' (different colors) to be used
// the higher the more CPU intensive (defaults to 5)
backlight.setSeparation(5); 

// blurriness of backlight (defaults to 50)
backlight.setBlur(50);

// spread (length) of backlight (defaults to 20)
backlight.setSpread(20);

// speed of led updates in seconds
// 0 is instant, defaults to 0.5
backlight.setResponse(0.5);

Settings can also be specified on initialization

var backlight = Backlight5(document.getElementById('someMovie'),{
	sepration: 5
	blur: 50,
	spread: 20,
	response: 0.5
});