Как использовать эффект "Подсветка" в плагине Wordpress?

Question

Я использую плагин mediaelement.js для WordPress (v2.1.7) и хочу показать видео с этим красивым стилем "Подсветка", который вы можете увидеть

здесь в действии:

http://mediaelementjs.com/examples/?name=backlight

На этой странице есть две инструкции по настройке, которые, я думаю, предназначены только для не Wordpress-версии:

I. Добавить плагин-скрипт

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

Хорошо, чтобы добиться этого, я добавил этот скрипт:

<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>

в моем файле header.php моей темы & скопировал файл "mejs-feature-backlight.js" в папку.../wp-content/themes/themename/js .

Вторая инструкция говорит следующее:

II. Включить плагин в список функций

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
});
});

Я не совсем уверен, где скопировать этот фрагмент кода. Поэтому, пока я только догадывался, я скопировал его в файл: "mediaelement-and-player.js", который мне показался лучшим выбором в этой ситуации.

Но теперь, когда я пытаюсь опубликовать видео, какой шорткод мне нужно использовать? Я пробовал следующее:

[video src = "http://mysite.com/mymedia.mp4" width = "640" height = "360" backlight = "true"] или

[video src="http://mysite.com/mymedia.mp4" width="640" height="360" id="player1"]

Но, к сожалению, это не работает. Видео проигрывается нормально но подсветки не вижу...

Любая помощь будет принята с благодарностью.

Answer 1

Прежде всего,

<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>

неправильно. Так должно быть:

<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>

или же

<script type='text/javascript' src='<?php echo get_bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>

Во-вторых, идентификатор видео плеера должен совпадать с идентификатором в:

jQuery (документ).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
});
});

это "#player1". Если вы можете динамически сгенерировать идентификатор и вставить в скрипт, то все в порядке. Следовательно, местоположение сценария должно быть на той же странице (или php-файл, если требуется), что и файл, который генерирует видеопроигрыватель, а не во внешнем файле JS.

Надеюсь, это поможет.