Audio/Video Onload

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>


#box {
position:absolute;
top:10px;
left:200px;
}

#box_audio {
position:absolute;
top:100px;
left:200px;
display:none;
}

#play_audio {
float:right;
display:none;
width:80px;
height:80px;
border-radius:50%;
color:white;
background-color:navy;
outline:none;
font-family:arial;
font-weight:900;
border:none;
font-size:15px;
cursor:pointer;
}

#pcent {
text-align:center;
font-family:arial;
font-size:40px;
}

#time {
width:0;
height:10px;
background-color:red;
display:inline-block;
outline:none;
border:none;
position:absolute;
top:300px;
left:0px;
}

#timeline {
width:0;
height:10px;
background-color:black;
display:inline-block;
outline:none;
border:none;
position:absolute;
top:300px;
left:0px;
}

.audio {
text-align:center;
font-family:arial;
font-size:90px;
color:navy;
}


</style>
</head>
<body>


<div id='box'>
<video id='video' autoplay muted controls>
<source src='https://neanderthal-emergen.000webhostapp.com/video.mp4' type='video/mp4'>
</video>

</div>


<div id='box_audio'>
<h1 class='audio'>Audio Mode</h1>
<h1 id='pcent'></h1>
<hr id='time'><br>
<hr id='timeline'>
</div>

<button onclick='hide_video()' id='play_audio'>Audio</button>


<script>

i=0;

        // 100/video.duration ( 74.838 ) = 1.336
   //  video.onloadedmetadata = function() {  alert(video.duration);   }

video.style.width=74.838*13+'px';
box_audio.style.width=74.838*13+'px';

onload=function(){
video.play();
time.style.width=74.838*13+'px';
play_audio.style.display='block';
}

video.ontimeupdate=function(){
pcent.innerHTML=video.currentTime*1.336+'%';
timeline.style.width=video.currentTime*13+'px';
if(video.currentTime>74.837){
pcent.innerHTML='100%';
video.pause();
}
}


time.onclick=function(event){
 var x = event.clientX-200;
 video.currentTime=x/13;
}

timeline.onclick=function(event){
 var x = event.clientX-200;
 video.currentTime=x/13;
}

function hide_video() {
if(i==0){i=1;
video.style.display='none';
play_audio.innerHTML='Video';
box_audio.style.display='block';
}else if(i=1){i=0;
video.style.display='block';
play_audio.innerHTML='Audio';
box_audio.style.display='none';
}
}


</script>
</body>
</html>