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

<!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>

你可能感兴趣的:(html5,api,视频)