老师问题如下

老师。进度条拖动不了，不知道什么原因，还有下图圈出来的几处代码不太明白，传入的e是什么意思和下面var ev有关系吗？还有其他几处代码谢谢

<!DOCTYPE html>

<html>

<head>

*{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: 50%;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: 40px;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>

</div>

</div>

</div>

</div>

// 不知道错在什么地方播放不了

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'),//获取当前时间

probgload=document.querySelector('.probgload');

//播放暂停事件

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;

document.onmousemove=function(e){

var ev=e || event;

var minX=ev.clientX-l;

var maxX=probg.offsetWidth-7.5;

minX=minX<-7.5?-7.5:minX;

minX=minX>maxX?maxX:minX;

raduis.style.left=minX+'px';

probg.style.width=(raduis.offsetleft+8)/probg.offsetWidth*100+'%';

}

document.onmouseup = function(e){

document.onmousemove=document.onmouseup=null;

videoing.currentTime=videoing.duration*(raduis.offsetleft+8)/probg.offsetWidth;

if (btnplay==false) {//false为播放状态

this.className = 'pauseNode';

videoing.play();

}else{ //否则暂停

this.className = 'PlayNode';

videoing.pause();

}

return false;

}

</script>

</body>

</html>

小鲜花 2019-12-16

源自：HTML5音视频 4-9 video-javascript（6）

收起

2回答

好帮手慕夭夭 2019-12-17 19:08:43

同学你好，问题解答如下：

1.前面理解的可以，如下公式可以这样理解：

先看(raduis.offsetLeft + 7) / Progressbar.offsetWidth 这个就是用按钮距离左侧的宽度除以进度条总的宽度，就是进度条占的百分比了。

例如按钮距离左侧20 px，进度条总长为100px ， 20/100就是20% 。

然后用当前的进度条百分比，乘以视频的总时间，就是当前播放的时间了。例如视频100分钟，100乘以20% ，就是20分钟。

currentTime就是返回视频播放的当前位置，也就是当我们拖动按钮到20px的位置时，视频就跳到20分钟的位置播放。

2 . return false是阻止元素默认的行为的，如果元素本身有默认行为（例如form有默认的提交行为），就需要设置。这里可以不设置。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕夭夭 2019-12-16 20:26:26

同学你好，不能进行拖拽，是因为单词拼错，如下：

改了之后可以拖拽，但是实现的效果还是与视频中的有一些差距。在另一个问题中有老师进行了建议，可以参考一下：

https://class.imooc.com/course/qadetail/178799

另外，同学圈出的问题解答如下：

1.e就是event对象，这个就是设置兼容的。有一些低版本的浏览器不能使用e ，那就使用event。

所以使用一个变量ev接收逻辑或表达式，如果浏览器能够识别e，表达式就返回e，使用ev就是使用了e。反之，返回event。

2.这个就是当我拖拽完毕之后就清除事件，这样拖拽完毕之后，鼠标在移动，按钮就不跟随拖拽了。

3.duration 属性返回当前/视频的长度，offsetLeft 获取按钮距离父级左侧的距离。

同学这里写错了，后面除以的应该是进度条的总长度。按钮距离左侧的长度/总长度就是按钮所在进度的百分比。例如总长度是100 ，按钮距离左侧的距离是20 ，那么已经播放的进度条百分比就是20/100即为五分之一。

所以以下可以理解为（按钮所在位置/总长度） *视频总时长就是当前视频播放的时间了。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者小鲜花 #1

老师你看我对以下理解正确吗都在注释中最后两处不太明白还希望老师解释以下 //进度条拖拽按钮 raduis.onmousedown = function(e){ var ev=e ||event; //这里兼容event对象 var l=ev.clientX-this.offsetLeft;//算出点击位置减去当前位置离父元素的左边距离 videoing.pause();//当鼠标按下的时候播放暂停 document.onmousemove=function(e){ var ev=e || event;//这里兼容event对象 var minX=ev.clientX-l;//算出当前点击的点离左边父元素的距离，用当前点击的距离减去之前算出的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+7)/Progressbar.offsetWidth*100+'%';//把小圆点动起来的宽度赋值给进度条加上之前减去的7除去总宽度乘以百分比得出当前动起来宽度的百分比 } document.onmouseup = function(){ document.onmousemove=document.onmouseup=null;//这个就是当我拖拽完毕之后就清除事件，这样拖拽完毕之后，鼠标在移动，按钮就不跟随拖拽了。 videoing.currentTime=videoing.duration*(raduis.offsetLeft+7)/Progressbar.offsetWidth;//视频的当前时间等于总时间乘以小圆点动起来的宽度加上之前减去的7在/总宽度（不太明白这个算法） if (btnplay==false) {//false为播放状态 this.className = 'pauseNode'; videoing.play(); }else{ //否则暂停 this.className = 'PlayNode'; videoing.pause(); } } return false;//这里不知道为什么要返回false,是必须返回吗还是有什么条件才需要返回 }

2019-12-17 16:51:58