Media Element JS - Remaining time in Video

Question

I have integrated multiple videos - demos and explanatory videos into various pages of a website using MediaElement JS.

Our client would like the remaining time of the video to be displayed together with the current and duration of the video. I have googled my way to glory (literally) but am unable to find any solution to it. Could anyone please guide me into putting this together.

Please help.Thanks :)

Answer 1

As you probably know already you can define what features/plugins that should be displayed on the mediaelement player, from the documentation:

// the order of controls you want on the control bar (and other plugins below)
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],

Now it isn't clear in the docs - but you can also add/implement your own plugins/features for Mediaelement.js. Have a look at the source for the time-feature for example - and that should give you enough information to build your own time remaining plugin. You could basically just make a copy of the time-feature code, and replace currenttime with your feature-plugin name, for example timeleft and insert the time remaining instead of currenttime/duration.

Here is an example of how the plugin you want could be created for mediaelement.js, notice the "build" prefix in front of the plugin name:

(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);

Finally remember to add your feature/plugin to the features: param, in the instance you create of mediaelement:

$('video').mediaelementplayer({
   features: ['playpause','progress','current','duration','timeleft','tracks','volume','fullscreen']
});

You can also look at the example how to add a loop button from the docs here: http://mediaelementjs.com/examples/?name=loop