代码实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <style> *{margin:0; padding:0;} #div1{300px; height:30px; background:#666; overflow:hidden; position:relative;} #div2{60px; height:30px; background:red; position:absolute; left:0; top:0;} #div3{300px; height:10px; background:#666; overflow:hidden; position:relative;top:10px;} #div4{60px; height:10px; background:yellow; position:absolute; left:240px;top:0;} </style> <script> window.onload= function(){ var oV = document.getElementById('v1'); var aInput = document.getElementsByTagName('input'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); var oDiv4 = document.getElementById('div4'); var disX = 0; var disX2 = 0; var timer = null; aInput[0].onclick = function(){ if( oV.paused ){//如果是暂停的 oV.play(); this.value = '暂停'; nowTime(); timer =setInterval(nowTime,1000); } else{ oV.pause(); this.value = '播放'; clearInterval(timer); } }; aInput[2].value = changeTime(oV.duration); aInput[3].onclick = function(){ if( oV.muted ){ oV.volume = 1; this.value = '静音'; oV.muted = false; } else{ oV.volume = 0; this.value = '取消静音'; oV.muted = true; } }; aInput[4].onclick = function(){ oV.mozRequestFullScreen(); }; function nowTime(){ aInput[1].value =changeTime(oV.currentTime); //获取比例 var scale =oV.currentTime/oV.duration; //设置位置 oDiv2.style.left = scale * 240 +'px'; } function changeTime(iNum){ iNum = parseInt( iNum ); var iH =toZero(Math.floor(iNum/3600)); var iM =toZero(Math.floor(iNum%3600/60)); var iS = toZero(Math.floor(iNum%60)); return iH + ':' +iM + ':' + iS; } function toZero(num){ if(num<=9) { return '0'+num; } else{ return '' + num; } } oDiv2.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - oDiv2.offsetLeft; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX; if(L<0){ L = 0; } else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){ L = oDiv1.offsetWidth- oDiv2.offsetWidth; } oDiv2.style.left = L + 'px'; //找出0到1的比例 var scale =L/(oDiv1.offsetWidth - oDiv2.offsetWidth); //得到拖拽后当前的时间 oV.currentTime = scale *oV.duration; //让当前时间更新 nowTime(); }; document.onmouseup = function(){ document.onmousemove = null; }; return false; }; oDiv4.onmousedown = function(ev){ var ev = ev || window.event; disX2 = ev.clientX -oDiv4.offsetLeft; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX2; if(L<0){ L = 0; } else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){ L =oDiv3.offsetWidth - oDiv4.offsetWidth; } oDiv4.style.left = L + 'px'; var scale =L/(oDiv3.offsetWidth - oDiv4.offsetWidth); oV.volume = scale; }; document.onmouseup = function(){ document.onmousemove = null; }; return false; }; }; </script> </head> <body> <video id="v1" > <source src="陈奕迅 - 陪你度过漫长岁月.mp4" ></source> </video><br/> <input type="button" value="播放" /> <input type="button" value="00:00:00" /> <input type="button" value="00:00:00" /> <input type="button" value="静音" /> <input type="button" value="全屏" /> <div id="div1"> <div id="div2"> </div> </div> <div id="div3"> <div id="div4"></div> </div> </body> </html>
2017-09-03 23:07:12