canvas视屏自制控件

太过爱你忘了你带给我的痛 2022-05-21 05:41 156阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.volume{
    				width: 300px;
    				height: 15px;
    				background: #ccc;
    				margin: 20px 0;
    				position: relative;
    			}
    			.volume div{
    				width: 100%;
    				background: #6fc;
    				height: 15px;
    			}
    			.volume span{
    				width: 10px;
    				height: 20px;
    				background: red;
    				border-radius: 50%;
    				position: absolute;
    				top:-5px;
    				left: 295px;
    			}
    			.currentTime{
    				width: 500px;
    				height: 15px;
    				background: #666;
    				margin: 20px 0;
    				position: relative;
    			}
    			.currentTime div{
    				width: 0;
    				background: #06c;
    				height: 15px;
    			}.currentTime span{
    				width: 10px;
    				height: 20px;
    				background: yellow;
    				border-radius: 50%;
    				position: absolute;
    				top:-5px;
    				left: -5px;
    			}
    		</style>
    	</head>
    	<body>
    	<video controls poster="img/video.png">
            <source src="Intermission-Walk-in.ogv"></source>
            <source src="Intermission-Walk-in_512kb.mp4"></source>
        </video>
        <button type="button">播放</button>
        <button type="button">静音</button>
        <button type="button">0:0:0</button>
        <button type="button">0:0:0</button>
        <button type="button">全屏</button>
        <div class="volume">
        	<div></div>
        	<span></span>
        </div>
        <div class="currentTime">
        	<div></div>
        	<span></span>
        </div>
    	</body>
    	<script>
    	window.onload=function(){
    		var oV=document.querySelector("video");
    		var aBrn=document.querySelectorAll("button");
    		var oVom=document.getElementsByClassName("volume")[0];
    		var oVt=document.getElementsByClassName("currentTime")[0];
    		var oVomdiv=oVom.getElementsByTagName("div")[0]
    		var oVtdiv=oVt.getElementsByTagName("div")[0];
    		var oVomspan=oVom.getElementsByTagName("span")[0];
    		var oVtspan=oVt.getElementsByTagName("span")[0];
                        //音量控制进度条
                         oVomspan.onmousedown=function(ev){
    			var disX=ev.clientX-oVomspan.offsetLeft;
    			document.onmousemove=function(ev){
    				var newleft=ev.clientX-disX+5;
    				newleft=Math.min(oVom.offsetWidth,newleft);
    				newleft=Math.max(0,newleft);
    				oVomdiv.style.width=newleft+"px";
    				oVomspan.style.left=newleft-5+"px";
    				oV.volume=newleft/oVom.offsetWidth;
    			}
    			document.onmouseup=function(){
    				document.onmousemove=document.onmouseup=null;
    			}
    		}
                            //视屏进度条
                            oVtspan.onmousedown=function(ev){
    			var disX=ev.clientX-oVtspan.offsetLeft;
    			document.onmousemove=function(ev){
    				var newleft=ev.clientX-disX+5;
    				newleft=Math.min(oVt.offsetWidth,newleft);
    				newleft=Math.max(0,newleft);
    				oVtdiv.style.width=newleft+"px";
    				oVtspan.style.left=newleft-5+"px";
    				oV.currentTime=newleft*oV.duration/oVt.offsetWidth;
    			}
    			document.onmouseup=function(){
    				document.onmousemove=document.onmouseup=null;
    			}
    		}
    		var newleft=0;
    		setInterval(function(){
    				time=oV.currentTime;
    				aBrn[2].innerHTML=Math.floor(time/3600)+":"+Math.floor(time%3600/60)+":"+Math.floor(time%60);//播放时间
    				newleft=oV.currentTime*oVt.offsetWidth/oV.duration;
    				oVtdiv.style.width=newleft+"px";
    				oVtspan.style.left=newleft-5+"px";
    			},1000)
                            //视屏开始暂停键
                             aBrn[0].onclick=function(){
    			if(oV.paused){
    				oV.play();
    				aBrn[0].innerHTML="暂停"
    			}
    			else{
    				oV.pause();
    				aBrn[0].innerHTML="播放"
    			}
    		}
                    //静音键
                    var bon=true;
    		aBrn[1].onclick=function(){
    			if(bon){
    				oV.muted=true;
    				
    			}else{
    				oV.muted=false;
    			}
    			bon=!bon;
    		}
                    //总时间
                 aBrn[3].onclick=function(){
    		var	time=oV.duration;
    	aBrn[3].innerHTML=Math.floor(time/3600)+":"+Math.floor(time%3600/60)+":"+Math.floor(time%60);
    
    		}
    //全屏键
     aBrn[4].onclick = function(){
    		var userAgent = navigator.userAgent;
    		if (userAgent.indexOf("Firefox") > -1) {
            	oV.mozRequestFullScreen();
        	} 
        	if (userAgent.indexOf("Chrome") > -1){
      			oV.webkitRequestFullScreen();
     		}
    	};
    	}
    	</script>
    </html>