MediaElement.js视频播放器：根据外部数据显示时间？ [英] MediaElement.js video player: Display time based on outside data?

问题描述

我有一个载有视频的MediaElement.js播放器，我有一个（数据库驱动的）函数，给定该视频中的时间偏移，给出了实际的实际时间。视频的一部分代表。

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.

即如果视频包含2个30秒的剪辑，其中第一个是周二早上录制的，其中第二个是录制的星期四晚上，我得到的功能将输入25.2并在周二早上返回特定时间，或者它将输入44.6并返回周四晚上的时间。等等。

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.

我的问题是：我是否可以拦截用于显示时间的MediaElement位（例如显示时间偏移的浮动div）当你在时间轨道上盘旋等等时，让他们使用我的功能来确定显示什么？理想情况下，如果可能的话，我不想修改MEJS代码本身。

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.

谢谢！

推荐答案

+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.

这是一个简单的示例，您可以如何为当前时间创建插件/功能，应该让你开始，确保你的功能名称前缀为build：

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

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

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

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

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

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

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

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

这篇关于MediaElement.js视频播放器：根据外部数据显示时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！