StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As you probably know already you can define what features/plugins that should be displayed on the mediaelement player, from the documentation: </p> <pre><code>// the order of controls you want on the control bar (and other plugins below) features: ['playpause','progress','current','duration','tracks','volume','fullscreen'], </code></pre> <p>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 <a href="https://github.com/johndyer/mediaelement/blob/master/src/js/mep-feature-time.js" rel="nofollow">time-feature</a> 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 <code>currenttime</code> with your feature-plugin name, for example <code>timeleft</code> and insert the time remaining instead of currenttime/duration.</p> <p>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:</p> <pre><code>(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); </code></pre> <p>Finally remember to add your feature/plugin to the <code>features:</code> param, in the instance you create of mediaelement:</p> <pre><code>$('video').mediaelementplayer({ features: ['playpause','progress','current','duration','timeleft','tracks','volume','fullscreen'] }); </code></pre> <p>You can also look at the example how to add a loop button from the docs here: <a href="http://mediaelementjs.com/examples/?name=loop" rel="nofollow">http://mediaelementjs.com/examples/?name=loop</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload