原生js打造自定义播放器

亦凉 2022-05-27 06:17 142阅读 0赞

用到的技术，主要是video的相关知识：实现的功能是去掉自带的控制条，按自己想要的形式设置视频的控制条：有播放与暂停（play()方法和pause()方法）、拖拽控制条控制视频的播放进度，并且控制条随着视频的播放进度自动前进或后退，还有视频播放的当前时间和视频的总时间，以及音量大小的控制，和是否全屏播放按钮，这里的全屏播放，只用了一条语句

oV.mozRequestFullScreen();//按ESC键退出全屏

详细的步骤在代码中已经注释了，有兴趣的可以看看哦，当然也希望多提宝贵意见。嗯、直接上代码喽（温馨提示，请用火狐浏览器看效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Title</title>
        <style>
    *{padding:0; margin:0;}
            #v1{position:absolute;}
            #control{height:40px;line-height:20px;  background-color:rgba(66,66,66,.6);box-sizing:border-box; padding:10px; position:absolute;transition:all 1s; -opacity:0;}
            .ctrl{display:inline-block; opacity:1; color:#fff;margin-left:.4%;}
            #pla img,#mut img,#full img{width:20px; height:20px; border-radius:50%;vertical-align:middle;}
            #cot{width:50%; height:8px;margin-left:12px; background-color:#000;position:relative; }
            #cot #co,#vol a{width:14px; height:14px; position:absolute;; top:-3px; background-color:#fff; border-radius:50%;}
            #cot #co{left:-2px;}
            #vol a{right:0;}
            #vol{width:10%; height:8px; background:#000; position:relative;}
            #full{float:right; margin-right:2px;}
            em{position:absolute; display:inline-block; height:8px; background:#fff;}
            #vol{margin-left:0px;}
    
        </style>
    </head>
    <body>
    <div id="wrap">
        <video  id="v1">
            <source src="五月天%20-%20仓颉.mkv"></source>
        </video>
        <div id="control">
            <span id="pla" class="ctrl"><img id="img1" src="imgs/apause.jpg"/></span>
            <span id="cot" class="ctrl"><a id="co"></a><em></em></span>
            <span id="now" class="ctrl">00:00:00</span>
            <span id="c" class="ctrl">/</span>
            <span id="all" class="ctrl">00:00:00</span>
            <span id="mut" class="ctrl"><img id="img2" src="imgs/apause.jpg"/></span>
            <span id="vol" class="ctrl"><a id="vo"></a><em></em></span>
            <span id="full" class="ctrl"><img id="img3" src="imgs/apause.jpg"/></span>
        </div>
    </div>
    
    <script>
        window.onload = function(){
            var oWrap = g('#wrap');//此处的g()函数是在下面封装的获取dom对象的方法
            var oV = g('#v1');
            var oCtr = g('#control');
            oCtr.style.width = oV.videoWidth  + 'px';
            oCtr.style.top = oV.videoHeight -40 + 'px';
            var aA = g('span');
            var oCo = g('#co');
            var oVo = g('#vo');
            var oNow = g('#now');
            var oAll = g('#all');
            var oVol = g('#vol');
            var ovWidth = oVol.offsetWidth;
            var oMut = g('#mut');
            var muImg = g('#img2');
            var oFull = g('#full');
            var fullImg = g('#img3');
            var oCW = oCo.offsetWidth;
            var oVW = oVo.offsetWidth;
            var oEm = g('em')[0];
            var ovEm = g('em')[1];
            var pW = aA[1].offsetWidth ;
            var iTimer = null;
            var iScare = oVW/ovWidth;
    
            ovEm.style.width = ovWidth - oVW+2+'px';
    
    
           /* oWrap.onmouseover = function(){
                oCtr.style.opacity = 1;
            }
            oWrap.onmouseout = function(){
                setTimeout(function(){
                    oCtr.style.opacity = 0;
                },1000);
    
            }*/
           //单击播放暂停按钮控制视频的播放和暂停
           var oP = g('#img1');
            oP.onclick = function(){
    
               if(oV.paused){
                   iTimer = setInterval(function(){
                       var scale = oV.currentTime/oV.duration;
                       nowPro();
                       oCo.style.left = (pW-oCW)*scale +'px';
                       oEm.style.width = (pW-oCW)*scale+1 +'px';
                   },30);
                   oP.src="imgs/apaly.jpg";
                   oV.play();
    
               }else{
                   oP.src = "imgs/apause.jpg";
                   oV.pause();
                   clearInterval(iTimer);
               }
           }
    
            //单击控制条来控制视频的进度
            aA[1].onclick = function(ev){
                nowPro();
                pro(ev);
            }
            //拖拽小圆点来控制视频的播放进度，同时改变小圆点自身的位置
            oCo.onmousedown = function(ev){
                document.onmousemove = function(ev){
                    nowPro();
                    pro(ev);
                }
                document.onmouseup = function(){
                    document.onmouseup = document.onmousemove = null;
                }
                return false;
            }
    //根据鼠标在进度条上的位置，判断视频的播放进度，同时调整控制点的位置
            function pro(ev){
                var ev = ev||event;
                var disX = oCo.offsetLeft+ ev.clientX - getLeft(oCo);
                if(disX<0){
                    disX = 0;
                }
                if(disX>=pW-oCW){
                    disX = pW-oCW;
                    oP.src = "imgs/apause.jpg";
    
                }
                oCo.style.left = disX +'px';
                oEm.style.width = disX+1 +'px';
                var scale = disX/(pW-oCW) ;
                oV.currentTime = scale*oV.duration;
            }
    
            //总时间功能的实现
            var allTime = parseInt(oV.duration);
            oAll.innerHTML  = getTime(allTime);
            function nowPro(){//当前播放的时间
                var nowTime = parseInt(oV.currentTime);
                oNow.innerHTML  = getTime(nowTime);
            }
            function getTime(time){//将时间的秒数转为对应时分秒格式
                var oHour = ozero(Math.floor(time/3600));
                var oMin = ozero(Math.floor(time%3600/60));
                var oSec = ozero(parseInt(time%60));
                return oHour+':'+oMin+':'+oSec;
            }
            //实现是否静音的功能
            var onOff = true;
            muImg.onclick = function(){
                if(onOff){
                    this.src = "imgs/apause.jpg";
                    oV.volume = 0;
                    oVo.style.left = 0;
                    ovEm.style.width = 0;
    
                    onOff = !onOff;
                }else{
                    this.src="imgs/apaly.jpg";
                    oV.volume = 1;
                    onOff = !onOff;
                    oVo.style.left = ovWidth - oVW+'px';
                    ovEm.style.width = ovWidth - oVW+2+'px';
    
    
                }
            }
            //拖动小图标键控制音量大小
    
    
            oVo.onmousedown = function(ev){
                document.onmousemove = function(ev){
                    var ev = ev||event;
                    var disX = oVo.offsetLeft+ ev.clientX - getLeft(oVo);
                    if(disX<0){
                        disX = 0;
                    }
                    if(disX>ovWidth-oVW){
                        disX = ovWidth-oVW;
                    }
                    oVo.style.left = disX +'px';
                    if(disX ==0){
                        ovEm.style.width = disX +'px';
                    }else{
                        ovEm.style.width = disX+1 +'px';
                    }
    
                    var scale = disX/(ovWidth-oVW);
                    oV.volume = scale;
    
                }
                document.onmouseup = function(){
                    document.onmouseup = document.onmousemove = null;
                }
                return false;
            }
    
            var fullWidth = document.documentElement.clientWidth;
            var fullHeight = document.documentElement.clientHeight;
    //单击全屏按钮让视频全屏播放
    oFull.onclick = function(){
        oV.mozRequestFullScreen();//按ESC键退出全屏
        if(oV.paused){//如果全屏的时候视频是暂停的，单击视频即可播放
            oV.onclick = function(){
                this.play();
            }
        }
    
    }
    
    
    
    
    
    
    
    
    
        }
    
    
    function g(id){
            if(id.substr(0,1)=='#'){
                return document.getElementById(id.substr(1));
        }
                return document.getElementsByTagName(id);
    
    }
    function getLeft(obj){//获取dom节点距离屏幕左侧的距离
            var iLeft = 0;
            while(obj){
                iLeft += obj.offsetLeft;
                obj = obj.offsetParent;
            }
            return iLeft;
    }
    function ozero(num){//补零函数的封装
            return num<=9?'0'+num:''+num;
    }
    
    </script>
    </body>
    </html>