Media Element JS - 视频中的剩余时间答案

【问题标题】：Media Element JS - Remaining time in VideoMedia Element JS - 视频中的剩余时间
【发布时间】：2013-06-24 13:23:30
【问题描述】：

我已经使用 MediaElement JS 将多个视频 - 演示和说明视频集成到网站的各个页面中。

我们的客户希望视频的剩余时间与视频的current 和duration 一起显示。我已经用谷歌搜索了我的荣耀之路（字面意思），但找不到任何解决方案。谁能指导我把它放在一起。

请帮忙。谢谢:)

【问题讨论】：

除非我遗漏了什么，否则剩余时间 = 持续时间 - 当前。有什么问题？
是的，对..但我找不到使用提供的函数在我的视频播放器中显示它的方法..来自 mediaelement.js：\

标签： video mediaelement.js

【解决方案1】：

您可能已经知道，您可以从文档中定义应该在 mediaelement 播放器上显示的功能/插件：

// the order of controls you want on the control bar (and other plugins below)
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],

现在文档中并不清楚 - 但您也可以为 Mediaelement.js 添加/实现自己的插件/功能。例如，查看time-feature 的源代码 - 这应该为您提供足够的信息来构建您自己的剩余时间插件。您基本上可以只复制时间功能代码，并将 currenttime 替换为您的功能插件名称，例如 timeleft 并插入剩余时间而不是当前时间/持续时间。

这是一个如何为 mediaelement.js 创建所需插件的示例，请注意插件名称前面的“build”前缀：

(function ($) {
    // loop toggle
    MediaElementPlayer.prototype.buildtimeleft = function (player, controls, layers, media) {
        var t = this;

        $('<div class="mejs-time">' +
            '<span class="mejs-timeLeft">&#45;' + // use &minus; for a wider sign
            (t.options.duration > 0 ?
                mejs.Utility.secondsToTimeCode(t.options.duration, t.options.alwaysShowHours || t.media.duration > 3600, t.options.showTimecodeFrameCount, t.options.framesPerSecond || 25) :
                ((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.timeLeft = t.controls.find('.mejs-timeLeft');

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

最后记得在您创建的 mediaelement 实例中将您的功能/插件添加到 features: 参数：

$('video').mediaelementplayer({
   features: ['playpause','progress','current','duration','timeleft','tracks','volume','fullscreen']
});

您还可以在此处查看如何从文档中添加循环按钮的示例： http://mediaelementjs.com/examples/?name=loop

【讨论】：