时间:2021-07-01 10:21:17 帮助过:29人阅读
HTML代码
<!-- src中放上本地的ogv的音频 --> <video id="v1" src="Intermission-Walk-in.ogv"></video> <p id="p1"> <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="全屏" /> </p> <p id="p2"> <p id="p3"></p> </p> <p id="p4"> <p id="p5"></p> </p>
CSS代码
#p2{ width:300px; height:30px; background:#666666; position:relative;} #p3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;} #p4{ width:300px; height:20px; background:#666666; position:relative; top:10px;} #p5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}
JavaScript代码
window.onload = function(){ var oV = document.getElementById('v1'); var op = document.getElementById('p1'); var aInput = op.getElementsByTagName('input'); var op2 = document.getElementById('p2'); var op3 = document.getElementById('p3'); var op4 = document.getElementById('p4'); var op5 = document.getElementById('p5'); var timer = null; //播放暂停 aInput[0].onclick = function(){ if(oV.paused){ this.value = '暂停'; oV.play(); toShow(); timer = setInterval(toShow,1000); } else{ this.value = '播放'; oV.pause(); clearInterval(timer); } }; aInput[2].value = timeChange(oV.duration); function timeChange(iAll){ iAll = Math.floor(iAll); var hours = toZero(parseInt(iAll/3600)); var mintus = toZero(parseInt(iAll%3600/60)); var sends = toZero(parseInt(iAll%60)); return hours + ":" + mintus + ":" + sends; } function toZero(num){ if(num<10){ return '0' + num; } else{ return '' + num; } } function toShow(){ aInput[1].value = timeChange(oV.currentTime); var scale = oV.currentTime/oV.duration; op3.style.left = scale * (op2.offsetWidth - op3.offsetWidth) + 'px'; } //静音 aInput[3].onclick = function(){ if(oV.muted){ this.value = '静音'; oV.muted = false; op5.style.left = oV.volume*(op4.offsetWidth - op5.offsetWidth) + 'px'; } else{ this.value = '消除静音'; oV.muted = true; op5.style.left = 0; } }; var disX = 0; //进度调整 op3.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - op3.offsetLeft; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX; if(L<0){ L = 0; } else if(L>op2.offsetWidth - op3.offsetWidth){ L = op2.offsetWidth - op3.offsetWidth; } op3.style.left = L + 'px'; var scale = L/(op2.offsetWidth - op3.offsetWidth); oV.currentTime = scale * oV.duration; toShow(); }; document.onmouseup = function(){ aInput[0].value = '暂停'; oV.play(); toShow(); timer = setInterval(toShow,1000); document.onmousemove = null; document.onmouseup = null; }; return false; }; var disX2 = 0; //声音 op5.onmousedown = function(ev){ var ev = ev || window.event; disX2 = ev.clientX - op5.offsetLeft; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX2; if(L<0){ L = 0; } else if(L>op4.offsetWidth - op5.offsetWidth){ L = op4.offsetWidth - op5.offsetWidth; } op5.style.left = L + 'px'; var scale = L/(op4.offsetWidth - op5.offsetWidth); oV.volume = scale; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; }; //全屏 aInput[4].onclick = function(){ oV.webkitRequestFullScreen(); }; };
以上就是HTML5实战与剖析之媒体元素(6、视频实例)的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!