javascript--封装自己的video控件

Posted 2020-10-15 _江江江江

/*
* @Author: Administrator
* @Date:   2017-11-17 20:22:52
* @Last Modified by:   Administrator
* @Last Modified time: 2017-11-20 18:14:38
*/
/*
1、play()控制视频的播放

2、pause()控制视频的停止

3、currentTime控制视频的当前时间

4、muted控制视频是否静音(赋值true or false)

5、volume控制音量的大小(赋值0-1)

6、duration视频的总时间

7、ontimeupdate事件(当前播放位置改变时执行，使用时要绑定addEventListener)

8、requestFullscreen全屏
 */
window.onload = function(){
    // 获得视屏对象
    
    var v = document.querySelector("#video");
    var playBtn = document.querySelector(".play-icon");
    v.addEventListener("click", function(){
        if(!v.paused){
            playBtn.style.background = "url(‘img/Play_12.png‘) center center no-repeat";
            v.pause();
        }else{
            v.play();
            playBtn.style.background = "url(‘img/pause_12.png‘) center center no-repeat";
        }    
    });
    playBtn.addEventListener("click", function(){
        if(!v.paused){
            playBtn.style.background = "url(‘img/Play_12.png‘) center center no-repeat";
            v.pause();
        }else{
            v.play();
            playBtn.style.background = "url(‘img/pause_12.png‘) center center no-repeat";
        }    
    });


    //工具栏的显示效果
    /*v.onmouseover=function(){
        this.nextElementSibling.style.display = ‘block‘;
    }
    v.onmouseleave=function(){
        this.nextElementSibling.style.display = ‘none‘;
    }
    var vtool = document.querySelector(".v-tool");
    vtool.onmouseover=function(){
        this.style.display = ‘block‘;
    }
    vtool.onmouseleave=function(){
        this.style.display = ‘none‘;
    }
        //声音的事件
    var voice = document.querySelector(".voice");
    voice.onmouseover =function(){
        this.children[0].style.display= ‘block‘;
    }
    voice.onmouseout =function(){
        this.children[0].style.display= ‘none‘;
    }*/
    //声音调整事件
    var voiceBar = document.querySelector(".voiceBar");
    var voiceBg = document.querySelector(".voice-bg");
    var voiceBarInner = document.querySelector(".voiceBar-inner");
    var voiceAfter = document.querySelector(".voice-after");
    var voiceCtrl = document.querySelector(".voice-ctrl");
    //记录当前坐标的位置
    var y0 = 0;
    
    v.volume = 0;
    voiceAfter.onmousedown = function(event){
        var event = event || window.event;//获得鼠标的拖动事件
            //记录下当前的坐标点
        y0 = event.clientY;
        var that = event;
        //获得当前div在所包含的祖先的位置
        //用于记录当前声量的比例
        
        document.onmousemove = function(event){
            var event = event || window.event;//获得鼠标的拖动事件
            var dis = 0;
            dis = event.clientY - y0;
            

            voiceBarInner.style.height = voiceBarInner.offsetHeight +dis +"px";

            if(voiceBarInner.offsetHeight >= voiceBar.offsetHeight ){
                voiceBarInner.style.height = "100%";
                y0 = y0;
                voicePercent = 0;
                voiceCtrl.style.background = "url(‘img/volume_1.png‘) center center no-repeat";
            }else if(voiceBarInner.offsetHeight == 0){
                voiceBarInner.style.height = "0";
                y0 = y0;
                voicePercent = 1;                
            }else{
                y0 = y0 + dis;
                voicePercent =1- voiceBarInner.offsetHeight/voiceBar.offsetHeight;
            }
            //修改背景
            if(voicePercent > 40){
                voiceCtrl.style.background = "url(‘img/volume_3.png‘) center center no-repeat";
            }else if(voicePercent <= 40 && voicePercent > 0){
                voiceCtrl.style.background = "url(‘img/volume_2.png‘) center center no-repeat";
            }else {
                voiceCtrl.style.background = "url(‘img/volume_1.png‘) center center no-repeat";
            }
            //重新设置高度
            v.volume = voicePercent;
        }
        document.onmouseup = function(){
            voicePercent = voiceBarInner.offsetHeight/voiceBar.offsetHeight * 100;
            document.onmousemove = null;
        }

    }
    //还没有结束
    //技术有限，没有使用通过点击直接条音量
    // voiceBarInner.onclick =  function(event){
    //     var y2 = event.clientY;
    //     //判断距离
    //     var dis= y0 -event.clientY ;
    //     y0 = event.clientY;
    //     voiceBarInner.style.height = voiceBarInner.offsetHeight - dis +"px";
    //     voicePercent =100- Math.ceil(voiceBarInner.offsetHeight/voiceBar.offsetHeight * 100);
    //     console.log(dis);
    // }
    // voiceBg.onclick =  function(event){
    //     var y2 = event.clientY;
    //     //判断距离
    //     var dis= y0 -event.clientY ;
    //     y0 = event.clientY;
    //     voiceBarInner.style.height = voiceBarInner.offsetHeight - dis +"px";
    //     voicePercent =100- Math.ceil(voiceBarInner.offsetHeight/voiceBar.offsetHeight * 100);
    //     console.log(dis);
    // }
    //点击音量图标是否静音
    
    voiceCtrl.onclick =function(){
        if(!v.muted){
            //启动静音
            v.muted = true;
            //更换背景
            voiceCtrl.style.background = "url(‘img/volume_0.png‘) center center no-repeat";
        }
        else{//返回上一个状态
            v.muted = false;
            if(voicePercent > 40){
                voiceCtrl.style.background = "url(‘img/volume_3.png‘) center center no-repeat";
            }else if(voicePercent <= 40 && voicePercent > 0){
                voiceCtrl.style.background = "url(‘img/volume_2.png‘) center center no-repeat";
            }else {
                voiceCtrl.style.background = "url(‘img/volume_1.png‘) center center no-repeat";
            }
        }
    }
    
    //console.log(voiceBar.offsetHeight);
    //console.log(voiceBarInner.offsetHeight);
    //同样的方法使用进度条
    var progressBar = document.querySelector(".progressBar");
    var proBarInner = document.querySelector(".proBar-inner");
    var proBarAfter = document.querySelector(".after");

    var durationPercent = 0;
    var proBarX0 = 0;
    proBarAfter.onmousedown = function(event){
        var event = event || window.event;

        proBarX0 = event.clientX;
        document.onmousemove = function(event){
            var event = event || window.event;
            var dis = event.clientX - proBarX0;
            
            proBarInner.style.width = proBarInner.offsetWidth + dis+"px";
            console.log(progressBar.offsetWidth);

            if(proBarInner.offsetWidth >= progressBar.offsetWidth){
                proBarInner.style.width = ‘100%‘;
                proBarX0 = proBarX0;                
            }else{
                proBarX0 = event.clientX;
            }
            durationPercent = proBarInner.offsetWidth / progressBar.offsetWidth;
            v.currentTime = v.duration * durationPercent;
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }

    //获得总时间
    var t1 = document.querySelector("#t1");
    t1.innerhtml = timeFormat(v.currentTime);
    var t2 = document.querySelector("#t2");
    t2.innerHTML = timeFormat(v.duration);


    //更新当前呢时间
    v.ontimeupdate=function(){
        t1.innerHTML = timeFormat(v.currentTime);
        proBarInner.style.width = (v.currentTime/v.duration)*100 +"%";
        //console.log(v.currentTime/v.duration);
        if(v.currentTime == v.duration){
            v.pause();
            v.currentTime = 0;
            playBtn.style.background = "url(‘img/Play_12.png‘) center center no-repeat";
        }
    };
    //转化为时间
    function timeFormat(t){
        var h = Math.floor(t / 3600);
        if(h < 10){
            h = "0"+h;
        }
        var m = Math.floor(t % 3600 /60);
        if(m < 10){
            m = "0"+m;
        }
        var s = Math.round(t% 3600 % 60);
        if(s < 10){
            s = "0"+s;
        }
        var str = ‘‘;
        if(h != 0){
            str = h + ‘:‘ + m + ‘:‘ + s;
        }else {
            str =  m + ‘:‘ + s;
        }
        return str;
    }


    ////点击全屏事件 
    var fullScreen = document.querySelector(".full-screen");
    var container = document.querySelector(".container");
    var videoDiv = document.querySelector(".video");
    var isFS = false;//是否在全屏状态下

    fullScreen.onclick = function(){
        
        var fc = document.querySelector(".fullScreen");
        if(!isFS){
            var element = document.documentElement;
            if(element.requestFullScreen) {
                element.requestFullScreen(); 
            } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen(); 
            } else if(element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen(); 
            }    
            fullScreen.style.background = "url(‘img/fullscreen_exit_12.png‘) center center no-repeat";
            fc.style.display = "block";
            fc.appendChild(videoDiv);
            isFS = true;

        }else{
            var element = document;
            if(element.exitFullscreen) {
                element.exitFullscreen(); 
            } else if(element.mozCancelFullScreen) {
                element.mozCancelFullScreen(); 
            } else if(element.webkitExitFullscreen ) {
                element.webkitExitFullscreen(); 
            }
            if(typeof window.ActiveXObject !== "undefined"){
                var wscript = new ActiveXObject("WScript.Shell");
                if(wscript !== null){
                    wscript.SendKeys("{Esc}");
                }
            }
            fullScreen.style.background = "url(‘img/Full_screen_12.png‘) center center no-repeat";
            fc.style.display = "none";
            fc.innerHTML = "";
            container.appendChild(videoDiv);
            isFS = false;
        }
    } 
}

在video标签内添加control属性，就可以做到控制，但是在使用的时候无法拖动视频的进度，于是就做了一个自己的video样式

功能差不多相似。这是myVideo1.0版本

一下是样式

/*
* @Author: Administrator
* @Date:   2017-11-17 18:15:43
* @Last Modified by:   Administrator
* @Last Modified time: 2017-11-20 17:31:06
*/
.video{
	width: 100%;
	position: relative;

}
.video video{
	width: 100%;
}
.video .v-tool{
	background: #f4f4f4;
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: 0;
	left: 0;
	/* display: none; */
}
.fl{
	float: left;
}
.v-tool .play-icon{
	display: block;
	width: 6%;
	height: 100%;
	text-align: center;
	line-height: 50px;
	background: url(‘../img/Play_12.png‘) center center no-repeat;
}
.v-tool .play-time{
	width: 16%;
	height: 100%;
	line-height: 40px;
	font-size: 14px;
	padding-left: 20px;

}

.progressBar{
	height: 2px;
	padding: 19px 0; 
	background: pink;
	background-clip: content-box;
	background-origin: content-box: 
}
.progressBar{
	width: 60%
}
.progressBar .proBar-inner{
	width: 0;
	height: 100%;
	position: relative;
	background: #000;
}

.progressBar .proBar-inner .after{
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #000;
	top: -4px;
	right: -10px;
}
.voice{
	position: relative;
	line-height: 40px;

}
.voice .voice-bg{
	width: 40px;
	height: 120px;
	background: #f5f5f5;
	position: absolute;
	top: -120px;
	left: 50%;
	margin-left: -20px;
	border-radius: 6px;
	/* display: none; */
}
.voice .voiceBar{
	width: 4px;
	height: 100px;
	background: #000;
	position: absolute;
	bottom: 5px;
	left: 50%;
	margin-left: -2px;
	
}
.voice .voiceBar .voiceBar-inner{
	width: 100%;
	height: 100%;
	position: relative;
	background: pink;
}
.voice .voiceBar .voiceBar-inner .voice-after{

	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #000;
	bottom: 0px;
	right: -3px;
}
.voice .voice-ctrl{
	display: block;
	width: 40px;
	height: 40px;
	background: url(‘../img/volume_1.png‘) center center no-repeat;
}
.video .full-screen{
	display: block;
	width: 40px;
	height: 40px;
	background: url(‘../img/Full_screen_12.png‘) center center no-repeat;
}
.fullScreen{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display:  none;
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>封装自己的video</title>
	<link rel="stylesheet" href="css/video.css">
	<script src="js/video.js"></script>
	<style>
		.container{
			width: 600px;
			height: 600px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="video">
			<video id="video" src="mp4/乐府视频.mp4"></video>
			<div class="v-tool">
				<!-- 整体控制 -->
				<span class="play-btn"></span>
				<!-- 控制播放和暂停 -->
				<span class="play-icon fl"></span>
				
				<div class="progressBar fl">
					<div class="proBar-inner">
						<div class="after"></div>
					</div>
					<div class="proBar-buffer"></div>
				</div>
				<!-- 当前进度和总时间 -->
				<div class="play-time fl">
					<span id="t1">00:00</span>/<span id="t2">00:00</span>
				</div>
				<!-- s声音控制 -->
				<div class="voice fl">
					<div class="voice-bg">
						<div class="voiceBar">
							<div class="voiceBar-inner">
								<div class="voice-after"></div>
							</div>
						</div>
					</div>					
					<span class="voice-ctrl"></span>
				</div>
				<div class="fl full-screen"></div>
			</div>
		</div>
	</div>
	<div class="fullScreen"></div>
</body>
</html>