拖动进度条问题
来源：4-9 video-javascript（6）
慕九州4517205
2019-07-09 16:01:18
老师，为什么拖动进度条松开后，进度条的时间是对的，但是控制按钮后退了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.outerNode{
width: 540px;
height: 332px;
position: absolute;
left: 50%;
top: 50%;
margin: -166px 0 0 -270px;
/* border: 1px solid black; */
box-shadow: 0 0 4px #5b606d;
}
.outerNode .videoNode{
width: 540px;
height: 305px;
float: left;
background-color: #000;
}
.outerNode .controlsNode{
width: 540px;
height: 27px;
float: left;
background: url(./imgs/ctrs_bg.gif) repeat-x;
}
.outerNode .controlsNode .playNode{
width: 15px;
height: 17px;
float: left;
margin: 5px 0 0 14px;
background: url(./imgs/playNode.png) no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .pauseNode{
width: 15px;
height: 17px;
float: left;
margin: 5px 0 0 14px;
background: url(./imgs/pause.png) no-repeat;
cursor: pointer;
}
/* 进度条 */
.outerNode .controlsNode .loadNode{
width: 267px;
height: 10px;
position: relative;
margin: 9px 0 0 14px;
float: left;
border-radius: 5px;
background: url(imgs/load_bg.png);
}
.outerNode .controlsNode .loadNode .crlNode{
width: 17px;
height: 17px;
position: absolute;
left: -6px;
top: -3.5px;
background: url(imgs/crl_bg.png);
z-index: 5;
}
.outerNode .controlsNode .loadNode .lineNode{
width: 0;
height: 7px;
position: absolute;
left: 0;
top: 1px;
border-radius: 3.5px;
background: url(imgs/line_bg.png) repeat-x;
}
/* 时间 */
.outerNode .controlsNode .timeNode{
float: left;
width: 70px;
height: 10px;
line-height: 10px;
margin: 9px 0 0 9px;
color:#fff;
}
.outerNode .controlsNode .timeNode span{
font-size: 10px;
float: left;
}
.outerNode .controlsNode .volumeNode{
width: 17px;
height: 16px;
float: left;
margin: 5px 0 0 10px;
background: url(imgs/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
width: 61px;
height: 8px;
position: relative;
margin: 10px 0 0 4px;
float:left;
background: url(imgs/volumeLine_bg.png) repeat-x;
}
.outerNode .controlsNode .volumeLine .v_left{
width: 3px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url(imgs/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
width: 3px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: url(imgs/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{
width: 15px;
height: 13px;
position: absolute;
left: -3px ;
top: -3px;
background: url(imgs/vo_d.png);
cursor: pointer;
}
.outerNode .controlsNode .fullNode{
width: 15px;
height: 17px;
float: left;
margin: 6px 0 0 30px;
background:url(imgs/full_bg.png);
cursor: pointer;
}
.outerNode .controlsNode .fullNode:hover{
background:url(imgs/full_hover_bg.png) no-repeat;
}
</style>
</head>
<body>
<!-- 最外层的元素 -->
<div class="outerNode">
<!-- 视频元素 -->
<video id="videoNode" class="videoNode" src="./data/imooc.mp4" poster="./imgs/poster.jpg"></video>
<!-- 控制器元素 -->
<div class="controlsNode">
<!-- 暂停/播放 -->
<div class="playNode" id="play"></div>
<!-- 进度条 -->
<div class="loadNode">
<!-- 拖动进度条的按钮 -->
<div class="crlNode"></div>
<div class="lineNode">
</div>
</div>
<!-- 播放时间 -->
<div class="timeNode">
<span class="now">00:00</span>
<span>-</span>
<span class="all">4:30</span>
</div>
<!-- 声音图标 -->
<div class="volumeNode">
</div>
<!-- 声音进度条 -->
<div class="volumeLine">
<div class="v_left"></div>
<div class="v_right"></div>
<div class="v_DragNode"></div>
</div>
<!-- 全屏按钮 -->
<div class="fullNode"></div>
</div>
</div>
<script type="text/javascript">
//播放暂停控制
//playNode 播放暂停按钮
//videoNode 播放器控件
//fullNode 全屏按钮
var playNode = document.getElementById("play"),
playBln = true,
videoNode = document.getElementById("videoNode"),
fullNode = document.querySelector('.fullNode'),
loadNode = document.querySelector('.loadNode'),
lineNode = document.querySelector('.lineNode'),
crlNode = document.querySelector('.crlNode'),
nowNode = document.querySelector('.now'),
allNode = document.querySelector('.all');
//播放暂停事件
playNode.onclick = function(){
playBln = !playBln;
if(playBln == false){
this.className = 'pauseNode';
videoNode.play();
}else{
videoNode.pause();
this.className = 'playNode';
}
};
//全屏按钮事件
fullNode.onclick = function(){
if(videoNode.webkitRequestFullscreen()){
videoNode.webkitRequestFullscreen();
}else if(videoNode.mozRequestFullScreen()){
videoNode.mozRequestFullScreen();
}else{
videoNode.requestFullscreen();
}
};
//视频的总时间计算
// setTimeout(function(){
// allNode.innerHTML = videoNode.duration
// },100);
videoNode.addEventListener('canplay',function(){
var needTime = parseInt(videoNode.duration);
var m = parseInt(needTime/60);
var s = needTime%60;
allNode.innerHTML = toDou(m)+':'+toDou(s);
},false);
// 当视频播放的时候，计算播放了多久
videoNode.addEventListener('timeupdate',function(){
// console.log(videoNode.currentTime);
lineNode.style.width = videoNode.currentTime/videoNode.duration*100 + 'px';
crlNode.style.left = lineNode.offsetWidth - 6 + 'px';
var needTime = parseInt(videoNode.currentTime);
var m = parseInt(needTime/60);
var s = needTime%60;
nowNode.innerHTML = toDou(m)+':'+toDou(s);
},false);
// 拖拽进度条按钮
crlNode.onmousedown = function(e){
videoNode.pause();
var ev = e || event;
// clientX 是鼠标点击位置距离当前body可视区域的x,y坐标
var l = ev.clientX - this.offsetLeft;
document.onmousemove = function(e){
var ev = e || event;
var needX = ev.clientX - l;
// offsetWidth 水平方向 width + 左右padding + 左右border-width
var maxX = loadNode.offsetWidth - 6;
needX = needX < -6 ? -6 : needX;
needX = needX > maxX ? maxX : needX;
crlNode.style.left = needX + 'px';
lineNode.style.width = (crlNode.offsetLeft+6)/loadNode.offsetWidth*100 + '%';
console.log(crlNode.style.left);
console.log(lineNode.style.width);
};
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
videoNode.currentTime = videoNode.duration * (lineNode.offsetWidth)/loadNode.offsetWidth;
console.log(videoNode.currentTime);
videoNode.play();
console.log(crlNode.style.left);
console.log(lineNode.style.width);
};
}
// 时间不足10问题
function toDou(time){
return time < 10 ? '0'+time : time;
}
</script>
</body>
</html>
1回答
-
同学你好，在给进度条设置宽度时，单位写错了，建议：修改成百分比就可以了
同学再测试一下，祝学习愉快~
0
