1

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.

1

I found the solution.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.