用html5新增的js媒体 API手写的一个视频播放器

本文链接：https://blog.csdn.net/babybk/article/details/51336756
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html5视频测试</title>
        <style>
        *{margin: 0;padding: 0;list-style-type: none;font-family: "微软雅黑";}
            .player{width: 1024px;margin: 50px auto;position: relative;}
            .player video{width:1024px;}
            .player .ctl{width: 1024px;height: 30px;background: rgba(90,90,90,.6);position: absolute;right: 0; bottom: 4px;cursor:default;opacity:0.8;transition:opacity 0.8s;}
            .player .ctl .btn,.player .ctl .time{padding: 0 5px; font-size: 14px;line-height: 20px;border-radius: 5px; background: #fff;position: absolute;bottom: 5px;}
            .player .ctl .btn-play{left: 20px;}
            .player .ctl .btn-jy{right: 200px;}
            .player .ctl .btn-qp{right: 20px;}
            .player .ctl .sch{height: 12px;border:1px solid #fff;border-radius: 10px;
            position: absolute; bottom: 8px;overflow: hidden;z-index: 1;}
            .player .ctl .sch-play{width: 400px;left:230px;}
            .player .ctl .sch-yl{width:100px;right:80px;}
            .player .ctl .sch-play .sch-sp{width: 200px;}
            .player .ctl .sch-yl .sch-sp{width: 80px;}
            .player .ctl .sch .sch-sp{position: absolute;height: 12px; top: 0;background: #fff;}
            .player .ctl .sch-btn{position: absolute;width: 30px;height: 20px;border-radius: 5px; top: 5px;z-index: 2;background: #fff;}
            .player .ctl .sch-s{left:430px;}
            .player .ctl .sch-y{left:900px;}
            /*.player .ctl li:nth-child(1){position: absolute;left：20px;top: 50%;margin-top:-15px; }*/
        </style>
    </head>
    <body>

        <div class="player">
            <video>
                <source src="潭州教育.mp4" type="video/mp4">
                您的浏览器不支持Video标签。
            </video>
            <ul class="ctl" onselectstart="return false">
                <li class="btn btn-play">播放</li>
                <li class="time" style="left:100px">00:00:00</li>
                <li class="sch sch-play">
                    <span class="sch-sp" style = "width:0px;"></span>
                </li>
                <li class="sch-btn sch-s" style="left:215px;"></li>
                <li class="time" style="right:300px">00:00:00</li>
                <li class="btn btn-jy">静音</li>
                <li class="sch sch-yl">
                    <span class="sch-sp"></span>
                </li>
                <li class="sch-btn sch-y"></li>
                <li class="btn btn-qp">全屏</li>
            </ul>
        </div>
        <script type="text/javascript">


        var oVid = document.getElementsByClassName("player")[0];
        var oVideo = oVid.children[0];  //拿到video
        var oCtl = oVid.children[1]
        var oUl = oCtl.children;  //拿到所有li


        var oUlWidth = parseInt(oUl[2].offsetWidth)-2;

        var maxTime;
        var thisTime;
        var oSp = oUl[2].children[0];
        console.log(parseInt(oUl[3].style.left));
        var oLeft = parseInt(oUl[2].offsetLeft)+parseInt(oVid.offsetLeft)+parseInt(oCtl.offsetLeft);
        var oSchSp = parseInt(oVid.offsetLeft);




        oUl[0].onclick = function(){
            if(oVideo.paused){
                oVideo.play();
                oUl[0].innerHTML = "暂停";
                oVid.onmouseover = function(){
                    oCtl.style.opacity=0.8;
                }
                oVid.onmouseout = function(){
                    oCtl.style.opacity=0;
                }
            }else{
                oVideo.pause();
                oUl[0].innerHTML = "播放";
                oVid.onmouseover=null;
                oVid.onmouseout =null;
            }

        }
        var oDateOvideo = function(time){
            time = ""+time;
            time = time.length<2?0+time:time;
            return time;
        }
        oVideo.onloadedmetadata = function(){
            maxTime = oVideo.duration;
            var h = oDateOvideo(Math.floor(maxTime/3600));      //时
            var m = oDateOvideo(Math.floor(maxTime%3600/60));   //分
            var s = oDateOvideo(Math.floor(maxTime%3600%60));   //秒
            oUl[4].innerHTML = h+":"+m+":"+s;
        }
        function date(){
            thisTime = oVideo.currentTime;
            var h = oDateOvideo(Math.floor(thisTime/3600));     //时
            var m = oDateOvideo(Math.floor(thisTime%3600/60));  //分
            var s = oDateOvideo(Math.floor(thisTime%3600%60));  //秒
            oUl[1].innerHTML = h+":"+m+":"+s;

            var t = (thisTime/maxTime);

            //console.log(oUl[2].children[0].width);
            oSp.style.width = parseInt(oUlWidth-2) * t.toFixed(2)+"px";
            oUl[3].style.left = 215+parseInt( oSp.style.width ) +"px";
        }
        oVideo.ontimeupdate = date;
        oUl[5].onclick = function(){
            if(oVideo.muted){
                oVideo.muted=false;
                oUl[5].innerHTML = "静音";
            }else{
                oVideo.muted=true;
                oUl[5].innerHTML = "声音";
            }
        }
        var move = function(ev){
            ev = ev || window.event;
            var _X = ev.clientX;
            //oUl[3].style.left = parseInt(_X) - oSchSp;
            //var strae = parseInt(oUl[3].style.left);

            oVideo.ontimeupdate = null;
            //console.log(_X-oLeft);
            var t = _X-oLeft;
            oVideo.currentTime = parseInt(maxTime * (t/oUlWidth).toFixed(2));
            //console.log(parseInt(oUl[3].style.left));
            oSp.style.width = oUlWidth * (t/oUlWidth).toFixed(2)+"px";
            oUl[3].style.left = _X - oSchSp-15 +"px";
            document.onmousemove = function(ev){
                ev = ev || window.event;
                var _x = ev.clientX;
                var xChange = parseInt(_x)-parseInt(_X);

                //oUl[3].style.left = xChange + _X - oSchSp - 15 +"px";

                var t = _x - oLeft;
                console.log(oVideo.currentTime);
                oVideo.currentTime = parseInt(maxTime * (t/oUlWidth).toFixed(2));
                oSp.style.width = oUlWidth * (t/oUlWidth).toFixed(2)+"px";
                if ((_x - oSchSp-15)<200) {
                    oUl[3].style.left = 200+"px";
                }
                else if ((_x - oSchSp-15)>600) {
                    oUl[3].style.left = 600+"px";
                }
                else{
                    oUl[3].style.left = _x - oSchSp-15+"px";
                }
                //console.log(parseInt(_x)-parseInt(_X));
                date();
            }
            document.onmouseup = function(){
                //oUl[2].onmousedown = null;

                document.onmousemove = null;
                oVideo.ontimeupdate = date;
                //alert(oSp.onmousemove);
            }

        }
        oUl[2].onmousedown = move;
        oUl[3].onmousedown = move;
        oUl[8].onclick = function(){
            //oVideo.webkitRequestFullScreen();
             if(oVideo.requestFullScreen) {  
                oVideo.requestFullScreen();  
              } else if(oVideo.mozRequestFullScreen) {  
                oVideo.mozRequestFullScreen();  
              } else if(oVideo.webkitRequestFullScreen) {  
                oVideo.webkitRequestFullScreen();  
              }
        }






















        /*
        video和audio属性：
            Autoplay    视频就绪自动播放
            controls    向用户显示播放控件
            Width       设置播放器宽度             //audio没有
            Height      设置播放器高度         //audio没有
            Loop        播放完是否继续播放该视频，循环播放
            Preload     属性描述了在页面加载后是否预加载音视频;
                        如果设置了 autoplay 属性，则忽略该属性;
                        属性值：
                            none:不执行预加载也不执行元数据
                            mete:加载元数据(不加预载视频，但要获取视频时长等等属性)
                            auto:默认值（预加载或缓冲）
            Src         视频url地址
            Poster      加载等待的画面图片


        Video  API方法
            play()
            pause()
            load()
            全屏:   webkit    element.webkitRequestFullScreen();
                    Firefox    element.mozRequestFullScreen();
                    W3C        element.requestFullscreen();
            退出全屏：
                    webkit    document.webkitCancelFullScreen(); 
                    Firefox    document.mozCancelFullScreen(); 
                    W3C       document.exitFullscreen();


        Video  API属性
            currentTime  :  开始到播放现在所用的时间
            duration  :  媒体总时间(只读)
            volume  :   0.0-1.0的音量相对值
            muted  :   是否静音 false /true
            paused  :   媒体是否暂停(只读)
            ended   :   媒体是否播放完毕(只读)
            error   :  媒体发生错误的时候，返回错误代码 (只读)
            currentSrc  :   以字符串的形式返回媒体地址(只读)

                    loadstart progress suspend emptied stalled play pause loadedmetadata                                    loadeddata waiting playing canplay canplaythrough seeking seeked 
                    timeupdate ended ratechange durationchange volumechange


        HTML5支持的音频格式：

            Ogg        免费   支持的浏览器:C、F、O
            MP3        收费   支持的浏览器: I、C、S
            Wav        收费   支持的浏览器: F、O、S


            audio   属性  
                autoplay    自动播放
                controls    向用户显示播放控件
                loop        循环
                preload 是否等加载完再播放
                src     要播放的音频的 URL。


        */
        </script>
    </body>
</html>