https://github.com/lostsource/backlight5

Adds backlight to a Video element using Canvas and CSS3
https://github.com/lostsource/backlight5

Last synced: 2 months ago
JSON representation

Adds backlight to a Video element using Canvas and CSS3

• Host: GitHub
• URL: https://github.com/lostsource/backlight5
• Owner: lostsource
• Created: 2012-12-31T00:16:25.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2013-01-01T22:12:41.000Z (over 12 years ago)
• Last Synced: 2025-01-24T08:12:11.552Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 125 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Experimental backlight for HTML5 video using canvas and CSS3 transitions 

**Live Demo**

**Usage**

Assuming this is your markup:

	

		

		

		

	

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

    });