html5 自制播放器
html5 播放器 自制
2023-09-11 14:22:19 时间
代码实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <style> *{margin:0; padding:0;} #div1{width:300px; height:30px; background:#666; overflow:hidden; position:relative;} #div2{width:60px; height:30px; background:red; position:absolute; left:0; top:0;} #div3{width:300px; height:10px; background:#666; overflow:hidden; position:relative;top:10px;} #div4{width: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
相关文章
- 盘点:崛起中的九大 HTML5 开发工具
- HTML5 版的flappy bird
- html5中常被忘记的标签,属性
- 在PC机上,如何用Chrome浏览器模拟查看和调试手机的HTML5页面?
- HTML5触摸事件(touchstart、touchmove和touchend) (转)
- [HTML5] Add Semantic Styling to the Current Page of a Navigation Item with aria-current
- [Html5] HTML5 开发手机应用
- 18. Html5的局: 用WebVR来解释小米VR眼镜
- html5学习(一) video字段
- 【HTML5】Web Workers
- [Javascript] HTML5 DOM project
- html5 本地存储
- [jPlayer] HTML5 Audio & Video for jQuery
- 为什么Facebook要将视频从Flash全面迁移到HTML5?
- html5 移动适配写法
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器