Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Adds backlight to a Video element using Canvas and CSS3

branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this 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
});
Something went wrong with that request. Please try again.