Mediaelement.js feature doesn't work

Question

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">&#45;' + // use &minus; 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('&#45;' + 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.

Answer 1

I found the solution.

You have to de-regsiter and add the wp-mediaelement script to add the features.