1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #video{ 8 500px; 9 height: auto; 10 } 11 .progress{ 12 margin-top:20px; 13 500px; 14 height: 10px; 15 background: burlywood; 16 /*position: absolute;*/ 17 border-radius:50px; 18 } 19 .handle{ 20 0; 21 height: 10px; 22 background: green; 23 border-radius:50px; 24 /*position: absolute; 25 left: 0; 26 top: 0;*/ 27 } 28 </style> 29 </head> 30 <body> 31 <video id = "video" src="A&V/Intermission-Walk-in_512kb.mp4"></video> 32 33 <div class="control"> 34 <input type="button" value="播放" /> 35 <input type="button" value="静音" /> 36 <!--初始时间--> 37 <input type="button" value="00:00:00" /> 38 <!--总时间--> 39 <input type="button" value="00:00:00" /> 40 </div> 41 42 <!--进度条--> 43 <div class="progress"> 44 <div class="handle"></div> 45 </div> 46 47 <script> 48 var video = document.getElementById("video"); 49 var btnArr = document.getElementsByTagName("input"); 50 var progress = document.querySelector('.progress'); 51 var handle = document.querySelector('.handle'); 52 53 var timer = null; 54 var totalTime = 0; 55 56 //总长度 57 var progressLength = progress.offsetWidth - handle.offsetWidth; 58 console.log(progressLength); 59 60 //播放 61 btnArr[0].onclick = function(){ 62 if(video.paused){ 63 video.play(); 64 this.value = "暂停"; 65 timer = setInterval(getVideoCurrentTime, 500) 66 }else { 67 video.pause(); 68 this.value = "播放"; 69 clearInterval(timer); 70 } 71 } 72 73 //静音 74 btnArr[1].onclick = function(){ 75 if(video.muted){ 76 video.muted = false; 77 this.value = "静音"; 78 }else { 79 video.muted = true; 80 this.value = "取消静音"; 81 } 82 } 83 84 //监听视频总时间 85 video.addEventListener("canplay", function () { 86 totalTime = video.duration; 87 btnArr[3].value = changeTime(totalTime); 88 }) 89 90 //当前时间 91 function getVideoCurrentTime(){ 92 //得到当前时间 93 // console.log(video.currentTime); 94 95 //当前时间的值 96 btnArr[2].value = changeTime(video.currentTime); 97 98 //改变进度条 99 var p = video.currentTime / video.duration * progressLength; 100 if(p < progressLength){ 101 handle.style.width = p + "px"; 102 }else { 103 btnArr[0].value = "播放"; 104 clearInterval(timer); 105 } 106 107 } 108 109 //改变时间格式 110 function changeTime(totalTime) { 111 totalTime = parseInt(totalTime); 112 113 var h = Math.floor(totalTime/3600); 114 h = h > 9 ? h : "0"+h; 115 116 var m = Math.floor(totalTime%3600/60); 117 console.log(totalTime%3600); 118 m = m > 9 ? m : "0"+m; 119 120 var s = totalTime%60; 121 s = s > 9 ? s : "0"+s; 122 123 return h+':'+m+':'+s 124 } 125 126 127 128 </script> 129 130 </body> 131 </html>
如果handle是可滑动的手柄，可以做出可拖动的效果，暂时未将手柄和进度条一起实现。望大家可以指点一下。
1 //调节音量的逻辑 2 vHandle.style.left = (volume.offsetWidth - vHandle.offsetWidth) + 'px'; 3 4 vHandle.onmousedown = function(ev){ 5 var offset = ev.offsetX; 6 7 document.onmousemove = function(ev){ 8 //鼠标在屏幕的x值 9 var x1 = ev.clientX; 10 //进度距离屏幕的x值 11 var x2 = progress.offsetLeft; 12 13 var distance = x1 - x2 - offset; 14 15 if(distance>=0 && distance<=volume.offsetWidth - vHandle.offsetWidth){ 16 vHandle.style.left = distance + 'px'; 17 //调节音量 18 video.volume = distance/(volume.offsetWidth - vHandle.offsetWidth); 19 } 20 } 21 22 document.onmouseup = function(){ 23 document.onmousemove = null; 24 document.onmouseup = null; 25 } 26 27 28 }