Как использовать эффект «Подсветка» в плагине Wordpress? - PullRequest
Новая
       17

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

0 голосов
/ 20 июля 2011

Я использую плагин 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 "]

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

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

1 Ответ

0 голосов
/ 20 июля 2011

Сначала, 

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

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

...