Skip to content

lostsource/backlight5

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published