JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player">
    <video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4"></video>
    <div id="volumestatus"></div>
</div>
<div id="controls">
    <div class="button" id="playpause">></div>
    <div class="button" id="volumedown">-</div>
    <div class="button" id="volumeup">+</div>
<div>

CSS

.button,#volumestatus{width:50px;height:50px;background:#EEE;text-align:center;line-height:50px;margin:5px 0px 0px 5px;font-family:arial;
-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:default;float:right;}
#player{position:relative;width:540px;}
#volumestatus{opacity:0;background:transparent;position:absolute;bottom:0px;right:0px;font-weight:bold;color:#FFF;}
#video{width:540px;display:block;background:#EEE;}
#controls{width:540px;}
#playpause{float:left;margin:5px 0px 0px 0px;}

JavaScript

var voltimer;

vup=document.getElementById("volumeup");
vdwn=document.getElementById("volumedown");

vud=video.volume
vup.addEventListener("click",vvolumeup)
function vvolumeup()
{if(vud>=1||video.muted){}
else{vud=Math.round((vud+0.05)*100)/100;video.volume=vud;}
volumestatus.innerHTML=vud*100+"%";volumestatus.style.opacity="0.9";clearTimeout(voltimer);voltimer=setTimeout(function(){volumestatus.style.opacity="0";},1000)
}
vdwn.addEventListener("click",vvolumedown)
function vvolumedown()
{if(vud<=0||video.muted){}
else{vud=Math.round((vud-0.05)*100)/100;video.volume=vud;}
volumestatus.innerHTML=vud*100+"%";volumestatus.style.opacity="0.9";clearTimeout(voltimer);voltimer=setTimeout(function(){volumestatus.style.opacity="0";},1000)
}
playpause.addEventListener("click",function()
                           {if(video.paused){video.play();playpause.innerHTML="| |"}
                            else{video.pause();playpause.innerHTML=">";}}
                           ,false)
video.addEventListener("ended",function(){playpause.innerHTML=">";},false)