JS Media Element - Time Left in the Video

Question

I have combined several videos - demos and explanatory videos on various pages of the website using MediaElement JS.

Our client would like the remaining time of the video to be displayed along with the current and duration video. I ruined my path to fame (literally), but could not find any solution. Can anyone advise me to combine this.

Please help. Thanks :)

Answer 1

As you probably already know, you can determine which functions / plugins should be displayed on the media 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 this is not clear in the docs, but you can also add / implement your own plugins / functions for Mediaelement.js. See, for example, the source of the time function - and this should give you enough information to create your own remaining plug-in time. You could just make a copy of the time function code and replace currenttime with your plug-in function name, for example timeleft , and insert the remaining time instead of the current time / duration.

Here is an example of how the plugin you want can be created for mediaelement.js, note the "build" prefix before 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, do not forget to add your function / plugin to the features: parameter in the instance you are creating from mediaelement:

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

You can also see an example of adding a loop button from the documentation: http://mediaelementjs.com/examples/?name=loop