MediaElement.js video player: Display time based on outside data?

Question

I've got a MediaElement.js player with a video loaded into it, and I have a (database-driven) function which, given a time offset within that video, gives me the actual real-world time at which that part of the video represents.

I.e., if the video consists of 2 30-second clips, the first of which was recorded Tuesday morning, and the second of which was recorded Thursday evening, the function I've got will take an input of 25.2 and return a particular time on Tuesday morning, or it'll take an input of 44.6 and return a time on Thursday evening. And so on.

My question is: Is it possible for me to intercept the bits of MediaElement that are used to display time (e.g. the floating div that shows the time offset when you're hovering over the time rail, and so on), and have them use my function to determine what to display? Ideally, I'd like to do this without modifying the MEJS code itself, if possible.

Thanks!

Answer 1

+1 Good question, and yes - it is possible. What you want to do is create your own plugin/feature for the progress and currenttime etc.

Here's a simple example how you can create a plugin/feature for currenttime, that should get you started, make sure you prefix your featurename with "build":

(function($) {
    MediaElementPlayer.prototype.buildmyfeature = function(player, controls, layers, media) {
            var t = this;

            $('<div class="mejs-time">'+
                    '<span class="mejs-currenttime">' + (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.currenttime = t.controls.find('.mejs-currenttime');

            // add a timeupdate event  
            media.addEventListener('timeupdate',function() {
                if(t.currenttime) {
                    //replace with whatever time you want to insert here
                    t.currenttime.html(mejs.Utility.secondsToTimeCode(t.media.currentTime, t.options.alwaysShowHours || t.media.duration > 3600, t.options.showTimecodeFrameCount,  t.options.framesPerSecond || 25));
                }
            }, false); 
        }
})(jQuery);

And add your plugin/feature to the features: param, like so:

$('audio,video').mediaelementplayer({
    features: ['playpause','myfeature','progress']
});

There is an example how to create a loop button (plugin/feature) from the official mediaelementjs site here: http://mediaelementjs.com/examples/?name=loop

If you need some code to get started on the progress bar, just have a look at mep-feature-progress.js at git.