Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Media Element JS plugin to modify video playback speed.
//Copy this plugin and add 'fasterslower' to the features array. Also write the CSS :)
(function($) {
$.extend(mejs.MepDefaults, {
fasterslowerText: 'Faster/Slower'
});
$.extend(MediaElementPlayer.prototype, {
buildfasterslower: function(player, controls, layers, media) {
var t = this;
var displaySpeed =
$('<div class="display-playback-speed hidden">Playback Speed: 100%</div> ')
.appendTo(controls);
var faster =
$('<div class="mejs-faster-button hidden" >' +
'<button type="button" aria-controls="' + t.id + '" title="' + t.options.fasterslowerText + '">+</button>' +
'</div>')
.appendTo(controls)
.click(function(e) {
e.preventDefault();
media.pause();
if(media.playbackRate < 1.75) media.playbackRate = media.playbackRate + 0.25;
media.play();
displaySpeed.html("Playback Speed: " + media.playbackRate * 100 + "%");
return false;
});
var slower =
$('<div class="mejs-slower-button hidden" >' +
'<button type="button" aria-controls="' + t.id + '" title="' + t.options.fasterslowerText + '">-</button>' +
'</div>')
.appendTo(controls)
.click(function(e) {
e.preventDefault();
media.pause();
if(media.playbackRate > 0.5) media.playbackRate = media.playbackRate - 0.25;
media.play();
displaySpeed.html("Playback Speed: " + media.playbackRate * 100 + "%");
return false;
});
media.addEventListener('play',function() {
if (media.pluginType === "native"){
faster.removeClass('hidden');
slower.removeClass('hidden');
displaySpeed.removeClass('hidden');
}
}, false);
media.addEventListener('pause',function() {
if(!faster.hasClass("hidden")){
faster.addClass('hidden');
}
if(!slower.hasClass("hidden")){
slower.addClass('hidden');
}
if(!displaySpeed.hasClass("hidden")){
displaySpeed.addClass('hidden');
}
}, false);
}
});
})(mejs.$);
@surikat1978

This comment has been minimized.

Copy link

commented Mar 23, 2016

HI! How install this plugin for mediaelement ? Thanks Advice!

@DieterPagel

This comment has been minimized.

Copy link

commented Jun 10, 2019

Hi. Thanks for this great plugin. I seem to be having some issues getting it to work though with YouTube videos. Can you please advise if there is a workaround for this, or if I am missing something?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.