Adds backlight to a Video element using Canvas and CSS3
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Experimental backlight for HTML5 video using canvas and CSS3 transitions

Live Demo


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'/>

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)

// blurriness of backlight (defaults to 50)

// spread (length) of backlight (defaults to 20)

// speed of led updates in seconds
// 0 is instant, defaults to 0.5

Settings can also be specified on initialization

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