webshims.setOptions('mediaelement', { replaceUI: 'auto', jme: { //barTemplate default in 1.14.4: '<div class="play-pause-container">{{play-pause}}</div><div class="playlist-container"><div class="playlist-box"><div class="playlist-button-container">{{playlist-prev}}</div><div class="playlist-button-container">{{playlist-next}}</div></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="chapters-container"><div class="chapters-controls mediamenu-wrapper">{{chapters}}</div></div><div class="subtitle-container mediamenu-wrapper"><div class="subtitle-controls">{{captions}}</div></div><div class="mediaconfig-container"><div class="mediaconfig-controls mediamenu-wrapper">{{mediaconfigmenu}}</div></div><div class="fullscreen-container">{{fullscreen}}</div>' barTemplate: '<div class="play-pause-container">{{play-pause}}</div><div class="progress-container">{{time-slider}}</div><div class="currenttime-container">{{currenttime-display}}</div><div class="duration-container">{{duration-display}}</div><div class="mute-container">{{mute-unmute}}</div><div class="fullscreen-container">{{fullscreen}}</div>' } }); webshims.polyfill('mediaelement'); //get the current default/active barTemplate: webshim.ready('mediacontrols', function(){ if(window.console){ console.log(webshim.cfg.mediaelement.jme.barTemplate); } });
<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 changes only the position of the "currenttime-display" and removes the volume-slider. With the barTemplate option you have full control over the rendered 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%; }