拖动进度条时，onmouseup设定的时间总会被canplay设定的时间覆盖
来源：4-6 video-javascript（3）
崔浩晟
2020-01-09 14:31:30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义视频播放器</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.outDiv{
width: 800px;
height: auto;
margin: 0 auto;
top: 55px;
background: #000000;
position: relative;
}
.outDiv .headDiv .videoDiv{
width: 100%;
}
.outDiv .footerDiv{
width: 100%;
position: relative;
height: 50px;
background: url(../images/ctrs_bg.gif) repeat-x;
}
.outDiv .playSpan{
position: absolute;
top: 8px;
left: 20px;
background: url(../images/playNode.png) no-repeat;
background-size: 35px 35px;
width: 35px;
height: 35px;
cursor: pointer;
}
.outDiv .pauseSpan{
position: absolute;
top: 8px;
left: 20px;
background: url(../images/pause.png) no-repeat;
background-size: 35px 35px;
width: 35px;
height: 35px;
cursor: pointer;
}
.outDiv .lineSpan{
position: absolute;
top: 20px;
left: 80px;
background: url(../images/load_bg.png) repeat-x;
background-size: 300px 15px;
width: 300px;
height: 14px;
}
.outDiv .bottonSpan{
position: absolute;
top: 14px;
left: 78px;
background: url(../images/crl_bg.png) no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
z-index: 5;
cursor: pointer;
}
.outDiv .upLine{
position: absolute;
background: url(../images/load_bg.gif) repeat-x;
background-size: 100px 15px;
height: 13px;
}
.outDiv .timeDiv{
position: absolute;
top: 15px;
left: 407px;
height: 30px;
width: 100px;
color: #ffffff;
z-index: 10;
}
</style>
</head>
<body>
<div class="outDiv">
<div class="headDiv">
<video class="videoDiv" poster="../source/poster.jpg">
<source src="../source/imooc.mp4">
<source src="../source/imooc.ogv">
<source src="../source/imooc.webm">
</video>
</div>
<div class="footerDiv">
<div class="playSpan"></div>
<div class="bottonSpan"></div>
<div class="lineSpan">
<div class="upLine"></div>
</div>
<div class="timeDiv"></div>
</div>
</div>
</body>
<script>
var playNode = document.querySelector('.playSpan');
var videoNode = document.querySelector('.videoDiv');
var buttonNode = document.querySelector('.bottonSpan');
var upNode = document.querySelector('.upLine');
var timeNode = document.querySelector('.timeDiv');
videoNode.addEventListener('canplay',function(){
let time = "00:00"+"-"+parseInt(videoNode.duration/60)+':'+parseInt(videoNode.duration%60)
console.log(time)
timeNode.innerHTML = time
})
videoNode.addEventListener('timeupdate',function(){
let s = parseInt(videoNode.currentTime%60) < 10 ? '0'+parseInt(videoNode.currentTime%60) : parseInt(videoNode.currentTime%60)
let m = parseInt(videoNode.currentTime/60) < 10 ? '0'+parseInt(videoNode.currentTime/60) : parseInt(videoNode.currentTime/60)
let time = m+":"+ s +"-"+parseInt(videoNode.duration/60)+':'+parseInt(videoNode.duration%60)
console.log(time)
timeNode.innerHTML = time
},false)
playNode.onclick = function(){
this.classList.toggle('pauseSpan')
if(this.classList.length == 2){
videoNode.play();
}else if(this.classList.length == 1){
videoNode.pause();
}
};
buttonNode.onmousedown = function(e){
var ev = e || event;
var l = ev.clientX - this.offsetLeft;
var needx = 0
document.onmousemove = function(e){
var ev = e || event;
needX = ev.clientX - l
var upX = ev.clientX - l
needX = needX < 78 ? 78 : needX;
needX = needX > 378 ? 378 : needX;
upX = upX < 78 ? 0 : needX;
// 进度条拖动
buttonNode.style.left = needX+'px'
upNode.style.width = needX-78+'px'
console.log(needX)
}
document.onmouseup = function(){
document.onmousemove = document.onmousemove = null;
let num = buttonNode.offsetLeft/378
console.log(num)
videoNode.currentTime = videoNode.duration * num
let s = parseInt(videoNode.currentTime%60) < 10 ? '0'+parseInt(videoNode.currentTime%60) : parseInt(videoNode.currentTime%60)
let m = parseInt(videoNode.currentTime/60) < 10 ? '0'+parseInt(videoNode.currentTime/60) : parseInt(videoNode.currentTime/60)
let time = m+":"+ s +"-"+parseInt(videoNode.duration/60)+':'+parseInt(videoNode.duration%60)
timeNode.innerHTML = time
if(this.classList.length == 2){
videoNode.play();
}else if(this.classList.length == 1){
videoNode.pause();
}
}
}
</script>
</html>
1回答
-
同学你好，canplay是播放就会执行，当拖动进度条时，也会执行canplay事件。canplay事件中设置了时间为0 ,所以会覆盖。如下：
可改为如下：
另外，拖动进度条会报错，如下：
报错后面提示了错误代码的位置，这是因为如下this是在document绑定的事件中使用的，它指向的就是document，document对象没有classList属性。改为playNode：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1
相似问题