<div class="media"> <div class="video"> <video id="player" src="../1.mkv" poster="../images/poster.jpg" width="600" height="446"></video> </div> <div class="controls"> <input type="button" value="Play" id="video-btn"> <span id="curtime">0</span><span id="duration">0</span> </div> </div> <script> var player=document.getElementById("player"); var btn=document.getElementById("video-btn"); var curtime=document.getElementById("curtime"); var duration=document.getElementById("duration"); duration.innerHTML=player.duration; btn.onClick=function(event){ if(btn.paused){ player.play(); btn.value="Pause"; }else{ player.pause(); btn.value="Play"; } }; setInterval(function(){ curtime.innerHTML=player.currentTime; },250); </script>