Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Add Comment
Please, Sign In to add comment