老师，我的小手拖动位置跑了，还变箭头了，此外，谷歌里拖动无效

来源：4-9 video-javascript（6）

weixin_慕设计6449438

2019-06-03 15:16:39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin:0; padding:0; list-style:nonde;}
.container{
position: absolute;
width:600px;
height:500px;
top:50%;
left:50%;
margin:-250px 0 0 -400px;
box-shadow: 0 0 5px burlywood;
}
.videonode{
width:100%;
height:450px;
float:left;
background:pink;
}
.controls{
width:100%;
height:50px;
float:left;
background-color:lightpink;
}
.playnode{
width:20px;
height:20px;
background:url(./images/playNode.png) no-repeat;
margin:20px 0 0 20px;
float:left;
cursor:pointer;
}
/*为了js里面的样式切换使用*/
.pausenode{
width:20px;
height:20px;
background:url(./images/pause.png) no-repeat;
margin:20px 0 0 20px;
float:left;
cursor:pointer;
}

.loadnode{
width: 180px;
height: 10px;
border-radius: 5px;
float:left;
background:url(./images/load_bg.png) repeat-x;
margin:20px 0 0 30px;
position: relative;
}
.loadnode .ctrlnode{
width: 17px;
height: 17px;
background:url(./images/crl_bg.png);
position:absolute;
top:-3.3px;
left:-4.5px; /*计算运动时，需要减去这个数值才能保证和进度条一致！*/
z-index:3; /*为了盖住下面的进度条*/
cursor:pointer;
}
.loadnode .linenode{
width:0%;
height:6px;
border-radius: 5px;
background:url(./images/line_bg.png);
position: absolute;
top:1.5px;
left:0;
}
.timenode{
width:80px;
height:20px;
float:left;
margin:15px 0 0 20px;
font-size: 13px;
}
.timenode span{
line-height:20px;
float:left;
}
.volumenode{
float:left;
background:url(./images/volume_bg.png) no-repeat;
width:30px;
height:30px;
margin:15px 0 0 20px;
}
.volumeline{
float:left;
background:url(./images/volumeLine_bg.png) repeat-x;
width:120px;
height:10px;
border-radius: 5px;
margin:20px 0 0 10px;
position: relative;
}
.volumeline .vo_d{
width:20px;
height:20px;
background:url(./images/vo_d.png) no-repeat;
position:absolute;
top:-3px;
left:-2px;
cursor:pointer;
}
.fullscreen{
width:30px;
height:30px;
background:url(./images/full_bg.png) no-repeat;
float:left;
margin:15px 0 0 30px;
cursor:pointer;
}
/*增加悬浮效果*/
.fullscreen:hover{background:url(./images/full_hover_bg.png) no-repeat;}
</style>
</head>
<body>
<div class="container">

<video class="videonode" src="./data/cp.mp4"></video>
<div class="controls">

<div class="playnode"></div>

<div class="loadnode">
<div class="ctrlnode"></div>
<div class="linenode"></div>
</div>

<div class="timenode">
<span class="now">00:30</span>
<span> - </span>
<span class="total">04:30</span>
</div>

<div class="volumenode"></div>

<div class="volumeline">
<div class="vo_d"></div>
</div>
<div class="fullscreen"></div>
</div>
</div>

<script>
var playnode=document.getElementsByClassName('playnode')[0], //这里别忘记啊[0],不然不会选中哦！
videonode=document.getElementsByClassName('videonode')[0],
fullscreen=document.querySelector('.fullscreen'),
timenode=document.querySelector('.timenode'),
now=timenode.querySelector('.now'),
total=timenode.querySelector('.total'),
linenode=document.querySelector('.linenode'),
ctrlnode=document.querySelector('.ctrlnode'),
loadnode=document.querySelector('.loadnode'),
volumeline=document.querySelector('.volumeline'),
vdrag=document.querySelector('.vo_d'),
onoff=true;

//控制播放按钮-方法一，开关控制
playnode.onclick=function(){
onoff = !onoff;
if (onoff==true) {
videonode.play();
playnode.style.background='url(./images/pause.png) no-repeat' //通过样式改变背景图片
} else{
videonode.pause();
playnode.style.background='url(./images/playNode.png) no-repeat'
}
};

//控制播放按钮-方法二，classlist.toggle()
/* playnode.onclick=function(){
if(this.classList.toggle('pausenode')) //样式里增加pause的样式
{
videonode.play();
}
else
{
videonode.pause();
};
};*/

//控制全屏的按钮
fullscreen.onclick = function(){
console.log(0);
if(videonode.webkitRequestFullscreen){
videonode.webkitRequestFullscreen(); //谷歌浏览器
} else if(videonode.mozRequestFullScreen){
videonode.mozRequestFullScreen(); //火狐浏览器
} else{
videonode.msRequestFullscreen(); //IE浏览器
};
};

//播放时间显示控制.通过时间监听让时间动起来！
videonode.addEventListener('timeupdate', function(){
var totaltime=timedu(parseInt(videonode.duration/60)) + ':' + timedu(parseInt(videonode.duration%60));
var nowtime=timedu(parseInt(videonode.currentTime/60)) + ':' + timedu(parseInt(videonode.currentTime%60));
now.innerHTML=nowtime;
total.innerHTML=totaltime;

//百分比控制进度条
// console.log(videonode.currentTime/videonode.duration*100)
linenode.style.width=videonode.currentTime/videonode.duration*100+ '%';

//像素控制进度按钮
//console.log(linenode.offsetWidth); //表示进度条的可视宽度
ctrlnode.style.left=linenode.offsetWidth - 4.5 + 'px';
});

//保证时间不足10秒的格式依旧是00：00d的样子
function timedu(time){
return time<10?'0'+ time:time;
}

//拖拽进度条，三部曲：鼠标按下，鼠标移动，鼠标放开
ctrlnode.onmousedown=function(e){
var ev=e || event; //时间参数e的兼容问题，ie和ie以外的浏览器；
var L=ev.clientX-this.offsetWidth;
videonode.pause(); //鼠标按下去视频暂停

document.onmousemove=function(e){
var ev=e || event;
var maxneedx=loadnode.offsetWidth-12; //最大范围，记得减去 ctrlnode本身宽度的一半,有点偏差哦！
var needx=ev.clientX-L; //真正需要的长度
//needx长度范围控制
needx= needx<-4.? needx=-4.5: needx;
needx= needx>maxneedx? maxneedx: needx;
//拖动图标的位置变化
ctrlnode.style.left=needx + 'px';
//进度条也得跟着变化的
// console.log(ctrlnode.offsetLeft); -5
linenode.style.width=(ctrlnode.offsetLeft + 5)/loadnode.offsetWidth*100+ '%';
};
document.onmouseup=function(e){
document.onmousemove= document.onmouseup=null;
//视频按着比例播放，就是拖动图标左侧距离除以进度条总长度
videonode.currentTime=videonode.duration*(ctrlnode.offsetLeft + 5)/loadnode.offsetWidth;
//控制视频的播放，暂停
if (onoff==true) {
videonode.play();
playnode.style.background='url(./images/pause.png) no-repeat' //通过样式改变背景图片
} else{
videonode.pause();
playnode.style.background='url(./images/playNode.png) no-repeat'
};
};
return false;
};
//声音拖拽控制
vdrag.onmousedown=function(e){
var ev=e || event; //时间参数e的兼容问题，ie和ie以外的浏览器；
var L=ev.clientX-this.offsetWidth;

document.onmousemove=function(e){
var ev=e || event;
var maxneedx=volumeline.offsetWidth-10;
var needx=ev.clientX-L; //真正需要的长度

//needx长度范围控制
needx= needx<-2? needx=-2: needx;
needx= needx>maxneedx? maxneedx: needx;
//拖动图标的位置变化
vdrag.style.left=needx + 'px';
//视频音量变化
videonode.volume=(vdrag.offsetLeft+2)/volumeline.offsetWidth; //-2是左侧多出的距离，保证比例从左到右是0-1的范围哦！
};
document.onmouseup=function(e){
document.onmousemove= document.onmouseup=null;
};
};
console.log(vdrag.offsetLeft);
</script>
</body>
</html>