老师 音量我是照着原视频打的 拖拽不了，问题如下
来源：4-9 video-javascript（6）
小鲜花
2019-12-17 10:09:10
老师 音量我是照着原视频打的 拖拽不了，就是VDragNode.parentNode.offsetWidth ;这里我没有用parentNode方法 直接写的它的父元素，还有图中我圈中的e是必须写e吗，还有圈中那些数字代表什么，还有，老师检查下代码
<!DOCTYPE html>
<html>
<head>
<title>视频播放</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
*{margin: 0;padding: 0;}
.wrapNode{width: 530px;height: 320px;margin: 200px auto;background-color: #000;}
.videoing{width: 530px;height: 300px;}
.controlsNode{width: 530px;height: 20px;position: relative;background: url(images/ctrs_bg.gif) repeat-x;}
.PlayNode{width: 13px;height: 15px;background: url(images/playNode.png);position: absolute;top: 50%;left: 13px;margin-top: -7.5px;}
.pauseNode{width: 13px;height: 15px;background: url(images/pause.png);position: absolute;top: 50%;left: 13px;margin-top: -7.5px;}
.Progressbar{width: 226px;height: 7px;position: absolute;top: 50%;left: 40px;margin-top: -3.5px;background: url(images/load_bg.png);border-radius: 3px;}
.probg{width: 0%;height: 100%;border-radius: 3px;background: url(images/line_bg.png);}
.raduis{width: 16px;height: 15px;background: url(images/crl_bg.png);position: absolute;top: 50%;left: -8px;margin-top: -7.5px;z-index: 2;}
.time{width: 152px;height: 12px;position: absolute;top: 50%;left: 282px;margin-top: -6px;line-height: 12px;color: #fff;}
.volumeing{width: 18px;height: 16px;position: absolute;top: 50%;left: 398px;margin-top: -8px;background: url(images/volume_bg.png);}
.volumeing_pro{width: 61px;height: 7px;position: absolute;top: 50%;left:420px;margin-top: -3.5px;background: url(images/volumeLine_bg.png);border-radius: 3px;}
.raduisvolume{left: 420px;}
.big{width:15px;height:17px;position: absolute;top: 50%;left: 500px;margin-top: -8.5px;background: url(images/full_bg.png);}
</style>
</head>
<body>
<div>
<!-- 最外层的盒子 -->
<div class="wrapNode">
<!-- 视频的链接地址 -->
<video src="data/imooc.mp4" poster="data/poster.jpg" class="videoing"></video>
<!-- 控制器元素 -->
<div class="controlsNode">
<!-- 播放暂停按钮 -->
<div class="PlayNode"></div>
<!-- 进度条 -->
<div class="Progressbar">
<!-- 进度条上面的原卷 -->
<div class="raduis"></div>
<!-- 动起来的进度条 -->
<div class="probg">
</div>
</div>
<!-- 播放时间 -->
<div class="time">
<span class="now">00.00</span>
<span>-</span>
<span class="all">4:40</span>
</div>
<!-- 喇叭音量 -->
<div class="volumeing"></div>
<div class="volumeing_pro">
</div>
<div class="raduisvolume raduis"></div>
<div class="big"></div>
</div>
<!-- 放大缩小 -->
</div>
</div>
<script type="text/javascript">
var PlayNode = document.querySelector('.PlayNode'),// 获取播放按钮
videoing = document.querySelector('.videoing'),//获取视频元素
btnplay=true,//PlayBln 控制暂停播放的布尔值
big =document.querySelector('.big');//获取全屏按钮
var all=document.querySelector('.all'),//获取总得时间
probg=document.querySelector('.probg'),//获取该动起来的滚动条外层
raduis=document.querySelector('.raduis'),//获取进度条上的按钮
now=document.querySelector('.now'),//获取当前时间
Progressbar=document.querySelector('.Progressbar'),
raduisvolume=document.querySelector('.raduisvolume'),
volumeing_pro=document.querySelector('.volumeing_pro');
//播放暂停事件
PlayNode.onclick = function(){
btnplay=!btnplay;//通过布尔值去改变classname的方法,默认是true不播放状态 取反值为播放
if (btnplay==false) {//false为播放状态
this.className = 'pauseNode';
videoing.play();
}else{ //否则暂停
this.className = 'PlayNode';
videoing.pause();
}
}
//放大视频浏览器兼容事件
big.onclick=function(){
if (videoing.webkitRequestFullscreen) {
videoing.webkitRequestFullscreen();
}else if (videoing.mozRequestFullScreen) {
videoing.mozRequestFullScreen();
}else{
videoing.requestFullscreen();
}
}
//视频总时长的计算
// setTimeout(function(){
// console.log(parseInt(videoing.duration);
// },100);
//解决了 上来时间的NAN的问题
videoing.addEventListener('canplay',function(){
var needTime=parseInt(videoing.duration),
s=needTime%60,//这里取余数是取得秒数
m=parseInt(needTime/60), //这里是取得分钟数
TimeNum=todo(m)+':'+todo(s);
all.innerHTML=TimeNum;
},false)
//解决事件不足10的问题
function todo(time){
return time<10?'0'+time:time;//老师 这里返回的作用是什么 这里的time是接收的m和s的值吗
}
//当播放视频时，需要当前的视频时间动起来
videoing.addEventListener('timeupdate',function(){
// 目前的 百分比进度
probg.style.width=videoing.currentTime/videoing.duration*100+'%';
raduis.style.left=probg.offsetWidth- 8.5 + 'px';
var needTime=parseInt(videoing.currentTime);//得到当前播放时间
var s=needTime%60;//这里取余数是取得秒数
var m=parseInt(needTime/60); //这里是取得分钟数
var TimeNum=todo(m)+':'+todo(s);
now.innerHTML=TimeNum;
},false)
//进度条拖拽按钮
raduis.onmousedown = function(e){
var ev=e ||event;
var l=ev.clientX-this.offsetLeft;
videoing.pause();
document.onmousemove=function(e){
var ev=e || event;
var minX=ev.clientX-l;
var maxX=Progressbar.offsetWidth-7;
minX=minX<-7?-7:minX;
minX=minX>maxX?maxX:minX;
raduis.style.left=minX+'px';
probg.style.width=(raduis.offsetLeft+8)/Progressbar.offsetWidth*100+'%';
}
document.onmouseup = function(){
document.onmousemove=document.onmouseup=null;
videoing.currentTime=videoing.duration*(raduis.offsetLeft+8)/Progressbar.offsetWidth;
if (btnplay==false) {//false为播放状态
this.className = 'pauseNode';
videoing.play();
}else{ //否则暂停
this.className = 'PlayNode';
videoing.pause();
}
}
return false;
}
//音量拖拽按钮
raduisvolume.onmousedown=function(e){
var ev=e || event;
var l=ev.clientX-ev.offsetLeft;
document.onmousemove=function(e){
var ev=e || event;
var minX=ev.clientX-l;
var maxX=volumeing_pro.offsetWidth-2.5;
minX=minX<-2.5?-2.5:minX;
minX=minX>maxX?maxX:minX;
var lastVolume=(raduisvolume.offsetLeft+2)/volumeing_pro.offsetWidth;
videoing.volume=lastVolume<0 ? 0:lastVolume;
raduisvolume.style.left=minX+'px';
}
document.onmouseup=function(e){
document.onmousemove=document.onmouseup=null;
}
return false;
}
</script>
</body>
</html>
1回答
-
好帮手慕言
2019-12-17
同学你好，关于同学的疑问，解答如下：
1、不能拖动是因为布局和js代码部分有问题，可以参考下方修改：
拖拽的小圆点要作为类名为volumeing_pro元素的子级
应该是this，而不是ev，
2、这里的e代表的是是事件对象，可以不写e，写成其它的字母也是可以的，只不过大家都习惯写e或者event。
3、这里的数字是为了在调节声音时处理边界问题。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
