MediaElement.js视频播放器：如何基于外部数据显示时间？

Question

MediaElement.js视频播放器：如何基于外部数据显示时间？

javascriptjqueryhtml5-videomediaelement.jsmediaelement

4

我有一个使用MediaElement.js播放器的视频，并且我有一个（基于数据库）函数，可以根据视频中的时间偏移量给出实际的现实时间。例如，如果视频由两个30秒的片段组成，第一个是星期二早上录制的，第二个是星期四晚上录制的，那么我拥有的函数将会接收到25.2这样的输入并返回星期二早上的某个特定时间，或者接收到44.6这样的输入并返回星期四晚上的某个时间。我的问题是：是否可能拦截MediaElement用于显示时间的部分（例如悬停在时间轨道上时显示时间偏移量的浮动div等），并使用我的函数来确定要显示的内容？理想情况下，如果可能的话，我希望不修改MEJS代码就能实现这一点。谢谢！

- DanM

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- am_ · Accepted Answer

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

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

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

以下是翻译的结果：

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

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