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

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.

score 0 · Answer 1 · answered Jul 20 '11 at 10:55

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.

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

1 Answers1