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 actions using javascript and videojs API + Nuevo plugin 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>