Videojs Chromeless Player

Play Pause Rewind Forward Mute Fullscreen Related Share
Hide the default player controls and build a custom interface using the Videos Player and Nuevo plugin API.

Add vjs-chromelass class to video element on website.

Code snippet


<video
    id="player-1"
    class="video-js vjs-chromeless"
    controls
    preload="auto"
    playsinline
    width="640"
    height="264"
    poster="//www.domain.com/path/to/poster.jpg"
>

Control player through custom buttons click action using javascript and videojs API + Nuevo plugin API functions.

Code snippet

<script>
	document.getElementById('button_play').onclick=function(e) {
	   player.play();
	}
	document.getElementById('button_pause').onclick=function(e) {
	   player.pause();
	}
	document.getElementById('button_rewind').onclick=function(e) {
	   player.rewind();
	}
	document.getElementById('button_forward').onclick=function(e) {
	   player.forward();
	}
	document.getElementById('button_mute').onclick=function(e) {
	   if(player.muted()) {
	      player.muted(false);
	      this.innerHTML='Mute';
	   } else {
	      player.muted(true);
	      this.innerHTML='Unmute';
	   }
	}
	document.getElementById('button_fullscreen').onclick=function(e) {
	   player.requestFullscreen(); 
	}
	document.getElementById('button_related').onclick=function(e) {
	   player.related(); 
	}
	document.getElementById('button_share').onclick=function(e) {
	   player.share(); 
	}
	</script>