webshim.setOptions('mediaelement', {
replaceUI: 'auto',
jme: {
barTemplate: '<div class="play-pause-container">{{play-pause}}</div>' +
//here is your new jump-10 plugin:
'<div class="jump-container">{{jump-10}}</div>' +
'<div class="playlist-container"><div class="playlist-box">{{playlist-prev}}{{playlist-next}}</div></div>' +
'<div class="currenttime-container">{{currenttime-display}}</div>' +
'<div class="progress-container">{{time-slider}}</div>' +
'<div class="duration-container">{{duration-display}}</div>' +
'<div class="mute-container">{{mute-unmute}}</div>' +
'<div class="volume-container">{{volume-slider}}</div><div class="subtitle-container">' +
'<div class="subtitle-controls">{{captions}}</div></div>' +
'<div class="fullscreen-container">{{fullscreen}}</div>'
}
});
webshim.polyfill('mediaelement');
webshim.ready('jme', function () {
$.jme.registerPlugin('jump-10', {
structure: '<button class="{%class%}" type="button">>></button>',
_create: function ($control, $media, $base) {
var enableDisable = function () {
var notReady = !$media.prop('readyState');
$control.prop('disabled', notReady);
};
$control.on('click', function () {
$media.prop('currentTime', $media.prop('currentTime') + 10);
});
$media.on('emptied loadedmetadata', enableDisable);
enableDisable();
}
});
});
<div class="player">
<div class="mediaplayer">
<video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
</video>
</div>
</div>
<p>This example adds a new control called 'jump-10' to the controlbar</p>
.player {
margin: auto;
padding: 10px;
width: 90%;
max-width: 900px;
min-width: 320px;
}
.mediaplayer {
position: relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
/* 16/9 */
}
.mediaplayer video, .mediaplayer .polyfill-video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.jump-10[disabled] {
color: #999;
cursor: not-allowed;
}