MediaElement.js视频播放器：根据外部数据显示时间？

Question

我有一个MediaElement.js播放器，其中已加载了视频，并且我有一个（数据库驱动的）函数，该函数给出了该视频中的时间偏移，从而为我提供了该部分实际的实际时间视频代表。

即，如果视频包含2个30秒的剪辑，其中第一个录制于周二上午，而第二个录制于周四傍晚，则我获得的功能将输入25.2，并返回一个特定的时间周二早上，否则将输入44.6，然后在周四晚上返回时间。等等。

我的问题是：我是否可以截取用于显示时间的MediaElement位（例如，当您将鼠标悬停在时间栏上时显示时间偏移的浮动div等），并让它们使用我确定要显示什么的功能？理想情况下，如果可能的话，我希望在不修改MEJS代码本身的情况下执行此操作。

谢谢！

Answer 1

+1好问题，是的-可能。您要做的就是为进度和当前时间等创建自己的插件/功能。

这是一个简单的示例，您可以如何为当前时间创建一个插件/功能，这应该可以帮助您入门，请确保在功能名称前加上“ 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);

并将您的插件/功能添加到以下功能：param中，如下所示：

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

这里有一个示例如何从官方mediaelementjs网站创建循环按钮（插件/功能）：http ://mediaelementjs.com/examples/?name=loop

如果您需要一些代码来开始在进度条上，只需在git上查看mep-feature-progress.js。