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