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 the vjs-chromelass class to the video element.

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 the player through custom button-click actions using JavaScript API functions.

Code snippet

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