I am trying to add new feature to mediaelement.js. Here's one example
http://mediaelementjs.com/examples/?name=loop
Another example which I am trying to implement now is this-
https://stackoverflow.com/questions/17276590/media-element-js-remaining-time-in-video
All of these works pretty well when I try to add it in html file. But inside wordpress, these scripts doesn't seem to have any effect. I have added the script via wp_enqueue_scripts hook. What's more if I try to add features, the video player break down. Here's my code:
define( 'SP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
Class test_me{
function __construct()
{
add_action('wp_enqueue_scripts', array(&$this, 'script_enquer') );
}
function script_enquer()
{
wp_register_script('time_left', SP_PLUGIN_URL . 'js/time-left.js', array('jquery', 'mediaelement', 'wp-mediaelement'), '1.0' );
wp_enqueue_script( 'time_left' );
wp_register_script( 'add_feature', SP_PLUGIN_URL . 'js/add_feature.js', false, '1.0', true);
wp_enqueue_script( 'add_feature');
}
}
$test = new test_me();
Here's the content of time-left.js
(function ($) {
// loop toggle
MediaElementPlayer.prototype.buildtimeleft = function (player, controls, layers, media){
var t = this;
$('<div class="mejs-time">' +
'<span class="mejs-timeLeft">-' + // use − for a wider sign
(t.options.duration > 0 ?
mejs.Utility.secondsToTimeCode(t.options.duration, t.options.alwaysShowHours || t.media.duration > 3600, t.options.showTimecodeFrameCount, t.options.framesPerSecond || 25) :
((player.options.alwaysShowHours ? '00:' : '') + (player.options.showTimecodeFrameCount ? '00:00:00' : '00:00'))
) +
'</span>' +
'</div>')
// append it to the toolbar
.appendTo(controls);
//attach element we want to update to t (this) for easier access
t.timeLeft = t.controls.find('.mejs-timeLeft');
// add a timeupdate event
media.addEventListener('timeupdate', function () {
if (t.timeLeft && t.media.duration) {
//replace with whatever time you want to insert here
t.timeLeft.html('-' + mejs.Utility.secondsToTimeCode(t.media.duration - t.media.currentTime, t.options.alwaysShowHours || t.media.duration > 3600, t.options.showTimecodeFrameCount, t.options.framesPerSecond || 25));
}
}, false);
}
})(jQuery);
add_feature.js
$('video').mediaelementplayer({
features['playpause','progress','current','duration','timeleft','tracks','volume','fullscren']
});
But the video isn't even shown now. Adding features seems to break the player. I have also tried de-regestering mediaelement and enqueue it manually. But the same result.
I just can't figure out the problem.