4

我有一个 MediaElement.js 播放器,其中加载了一个视频,并且我有一个(数据库驱动的)函数,给定该视频中的时间偏移量,它为我提供了该部分的实际真实时间视频代表。

即,如果视频由 2 个 30 秒的剪辑组成,第一个是周二早上录制的,第二个是周四晚上录制的,我得到的函数将输入 25.2 并返回特定时间星期二早上,或者它需要输入 44.6 并在星期四晚上返回一个时间。等等。

我的问题是:我是否可以截取用于显示时间的 MediaElement 位(例如,当您将鼠标悬停在时间轨道上时显示时间偏移的浮动 div 等),并让它们使用我的功能来确定要显示什么?理想情况下,如果可能的话,我希望在不修改 MEJS 代码本身的情况下这样做。

谢谢!

4

1 回答 1

5

+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

于 2013-09-30T09:28:02.973 回答