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