原生js打造自定义播放器

最新推荐文章于 2024-10-07 18:38:46 发布

冰雪为融

最新推荐文章于 2024-10-07 18:38:46 发布

阅读量2.4k

点赞数 1

分类专栏： js练习文章标签：自定义播放器 video

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79921924

版权

js练习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

用到的技术，主要是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>