Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

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
});

About

Adds backlight to a Video element using Canvas and CSS3

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.