How to use the "Backlight" effect in the Wordpress plugin? - wordpress

Question

I am using mediaelement.js plugin for WordPress (v2.1.7) and want to display a video with this beautifull "Backlight" style which you can see
here in action:
http://mediaelementjs.com/examples/?name=backlight
On this page there are two setup instructions which I guess is only for the non-Wordpress version:
I. 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>
Ok to achieve this I added this script:
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
in my header.php file of my theme & copied the file "mejs-feature-backlight.js" in the folder .../wp-content/themes/themename/js .
The second instruction says the following:
II. 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
});
});
I am not really sure where to copy this code-snippet. So while just guessing I copied it in the file: "mediaelement-and-player.js" which seemed to be the best choice for me in this situation.
But now when I try to post a video
which shortcode I have to use? I have tried the following:
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" backlight="true"] or
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" id="player1"]
But sadly it do not work. The Video plays fine but I do not see any backlight...
Any help would be greatly appreciated.

Answer 1

First off,
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
is wrong. It should be:
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
or
<script type='text/javascript' src='<?php echo get_bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
Secondly the id for the video player must match the ID in:
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
});
});
that is "#player1". If you can dynamically generate the ID and put in the script then you are fine. Hence the location of the script should be in the same page (or php file if required) as the file that generates the video player not in an external JS file.
Hope that helps.