Plugin: Backlight


What It Does

The backlight plugin is an attempt to mimic the Philips Ambilight feature (video). The plugin samples the colors on the edges of the screen and draws a gradient in all directions onto a <canvas> element, overlaying it with a alpha gradient to simulate the light dropping off. Some code was draw from an example by Spashnology.



Add Plugin Script

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<!-- here's the plugin -->
<script src="mejs-feature-backlight.js"></script>

Include the plugin in the features list

jQuery(document).ready(function($) {

	// create player
		// add desired features in order
		features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
		// the time in milliseconds between re-drawing the light
		backlightTimeout: 200