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

来源：互联网发布：oss 阿里云编辑：程序博客网时间：2024/05/17 04:13
<!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>
0 0