H5视频控制防止快进

章志军

<!DOCTYPE html>
<html lang="zn">
<head>
	<meta charset="UTF-8">
	<title>视频控制测试</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
	<div class="wrap">
		<h3>视频控制测试</h3>
        <p id="demoText">测试文本</p>
		<div class="content">
			<div class="player">
				<video src="89646213.mp4">
				您的浏览器不支持 video 标签。
				</video>
				<div class="control">
					<div class="fa fa-eercast fa-spin play_pause"></div>
					<div class="kzprogress">
						<span class="progress"></span>
					</div>
					<div class="timer">
						<span class="progress_timer">00:00:00</span>/
						<span class="duration_timer">00:00:00</span>
					</div>
					<div class="fa fa-volume-up muted"></div>
                    <div class="fa fa-expand expand"></div>
				</div>
			</div>
		</div>
	</div>   
    <p><a class="ex1">测试</a></p>
</body>
<script src="js/index.js"></script>
</html>

var videoObj = document.querySelector('video')
var playBtn = document.querySelector('.play_pause')
var progressTimer = document.querySelector('.progress_timer')
var durationTimer = document.querySelector('.duration_timer')
var progress = document.querySelector('.progress')
var player = document.querySelector('.player')
var expand = document.querySelector('.expand')
var muted = document.querySelector('.muted')
var kzprogress = document.querySelector('.kzprogress')

var x=document.getElementById("demoText"); 
var ct=0;

//var focus=document.hasFocus();

/*var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
// 添加监听器
document.addEventListener(visibilityChange, function() {
     //x.innerHTML+="当前页面是否被隐藏：" + document[hidden]
     videoObj.pause()
    playBtn.classList.remove('fa-spinner')
    playBtn.classList.add('fa-eercast')
}, false)
*/

 
  window.onblur = function () {
    videoObj.pause()
      playBtn.classList.remove('fa-spinner')
    playBtn.classList.add('fa-eercast')
  }
 
  window.onfocus = function () {
    videoObj.play()
      playBtn.classList.remove('fa-eercast')
		playBtn.classList.add('fa-spinner')
  }

playBtn.addEventListener('click', function(){
    if(videoObj.paused){
		// 如果视频处于播放状态
		videoObj.play()
		this.classList.remove('fa-eercast')
		this.classList.add('fa-spinner')
	}else{
		videoObj.pause()
		this.classList.add('fa-eercast')
		this.classList.remove('fa-spinner')
	}
})


videoObj.addEventListener('click', function(){
 if(videoObj.paused){
		// 如果视频处于播放状态
		videoObj.play()
		playBtn.classList.remove('fa-eercast')
		playBtn.classList.add('fa-spinner')
	}else{
		videoObj.pause()
		playBtn.classList.add('fa-eercast')
		playBtn.classList.remove('fa-spinner')
	}
})


videoObj.addEventListener('moveout', function(){
 if(videoObj.paused){
		// 如果视频处于播放状态
		videoObj.play()
		playBtn.classList.remove('fa-eercast')
		playBtn.classList.add('fa-spinner')
	}else{
		videoObj.pause()
		playBtn.classList.add('fa-eercast')
		playBtn.classList.remove('fa-spinner')
	}
})



muted.addEventListener('click', function(){
	videoObj.muted=!videoObj.muted;
	if(videoObj.muted){
		this.classList.remove('fa-volume-up')
		this.classList.add('fa-volume-off')
	}else{
		this.classList.add('fa-volume-up')
		this.classList.remove('fa-volume-off')
	}
})

let {totalT,presentT} = {totalT:0,presentT:0}
videoObj.addEventListener('canplay',function(){
	totalT = this.duration
	var videoDuration = formatTime(totalT)
	durationTimer.innerHTML = videoDuration
})

kzprogress.addEventListener('click', function(e){
    var times = videoObj.duration*(e.offsetX/450);
    if(ct!=0){videoObj.currentTime =  times;}
})

videoObj.addEventListener('timeupdate',function(){
	presentT = this.currentTime
	var videoCurrent = formatTime(presentT)
	progressTimer.innerHTML = videoCurrent
	var percent = presentT/totalT*100
	progress.style.width = percent+'%'
})

function formatTime(t){
	var h = parseInt(t/3600)
	h = h<10?'0'+h:h 
	var m = parseInt(t%3600/60)
	m = m<10?'0'+m:m
	var s = parseInt(t%60)
	s = s<10?'0'+s:s
	return h+':'+m+':'+s
}

videoObj.addEventListener("ended",function(){
    playBtn.classList.remove('fa-spinner')
			playBtn.classList.add('fa-eercast')
			videoObj.currentTime = 0;
			videoObj.pause();
    ct++;
    x.innerHTML =ct;
		});


expand.addEventListener('click',function(){
	player.webkitRequestFullScreen()
})

*{
	margin: 0;
	padding: 0;
}
/* 去掉全屏时显示的自带控制条 */
video::-webkit-media-controls{
    display:none !important;
}
.wrap h3{
	text-align: center;
	height: 100px;
	line-height: 100px;
}
.player{
	width: 720px;
	height: 400px;
	margin: 0 auto;
	position: relative;

}
.player video{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
}
.player .control{
	position: absolute;
	background: rgba(0,0,0,0.3);
	width: 710px;
	height: 30px;
	border-radius: 5px;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
}
.player .control div{
	display: inline-block;
	line-height: 30px;
	margin-left: 10px;
	font-size: 18px;
	color: #fff;
}

.player .control .play_pause,.player .control .expand{
	color: rgba(255,255,255,1.00);
}

.player .control .expand:hover{
    color:hotpink;
}

.player .control .muted:hover{
    color:hotpink;
}

.player .control .play_pause:hover{
    color:hotpink;
}


.player .control .kzprogress{
	width: 450px;
	height: 8px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 5px;
	overflow: hidden;
}
.player .control .progress{
	display: block;
	width: 0%;
	height: 10px;
	background: #fff;
}
.player .control .timer{
	font-size: 13px;
}