Plugin: Backlight

Notes

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.

Setup

1

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>
2

Include the plugin in the features list

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

	// create player
	$('#player1').mediaelementplayer({
		// add desired features in order
		features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
		// the time in milliseconds between re-drawing the light
		backlightTimeout: 200
	});

});