我已经使用 MediaElement JS 将多个视频 - 演示和说明视频集成到网站的各个页面中。
current
我们的客户希望视频的剩余时间与视频的和一起显示duration
。我已经用谷歌搜索了我的荣耀之路(字面意思),但找不到任何解决方案。谁能指导我把它放在一起。
请帮忙。谢谢:)
我已经使用 MediaElement JS 将多个视频 - 演示和说明视频集成到网站的各个页面中。
current
我们的客户希望视频的剩余时间与视频的和一起显示duration
。我已经用谷歌搜索了我的荣耀之路(字面意思),但找不到任何解决方案。谁能指导我把它放在一起。
请帮忙。谢谢:)
您可能已经知道,您可以从文档中定义应该在 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 添加/实现自己的插件/功能。例如,查看时间功能的来源- 这应该为您提供足够的信息来构建您自己的剩余时间插件。您基本上可以只复制时间功能代码,并替换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">-' + // use − 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('-' + 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);
features:
最后记得在您创建的 mediaelement 实例中将您的功能/插件添加到参数中:
$('video').mediaelementplayer({
features: ['playpause','progress','current','duration','timeleft','tracks','volume','fullscreen']
});
您还可以在此处查看如何从文档中添加循环按钮的示例:http: //mediaelementjs.com/examples/ ?name=loop