如何在Wordpress插件中使用“背光”效果？

Question

我正在使用WordPress的mediaelement.js插件(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/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”或

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

其次，视频播放器的id必须与以下内容中的ID匹配：

函数(文档).ready(jQuery($){

// 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“。如果您可以动态生成ID并将其放入脚本中，那么就没问题了。因此，脚本的位置应该与生成视频播放器的文件位于同一页面(或php文件，如果需要)，而不是位于外部JS文件中。

希望这能有所帮助。