老师 不知道为什么无法拖动

老师 不知道为什么无法拖动

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

        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）
27
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕粉 2019-12-17 10:09:11

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

1、是的，进度条宽度设置为0,是为了后期百分比跑起来。

2、小圆点设置left-8.5是整个小圆点宽度的一半。

3、+9是因为在如下计算中：

http://img1.sycdn.imooc.com//climg/5df836cc09fe36e208700071.jpg

因为radius.offsetLeft我们初始设置的是-8.5，同学可以理解为刚开始为了效果让他往左边移了8.5，但是后面要计算比例的时候，就得把之前移出去的值再加回来，而且这个地方要计算当前的时间，所以我们要把负值变为正值，就加上了9，其实加8.6、8.7也是可以的，老师这里只是大致给了一个数。

4、同学是不明白这里的-8.5吗：

http://img1.sycdn.imooc.com//climg/5df8377509947ba805840080.jpg

如果是的话，这是在计算能拖动的最大距离，因为小圆点占据了8.5，所以要将小圆点的减掉。

这个在工作中使用的不多，一般都是直接用插件，同学了解一下即可。

另外，建议同学再认真听几遍视频哦。

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

0
收起回答
好帮手慕粉 2019-12-16 20:07:24

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

1、todo是一个函数，用来判断分钟和秒是否小于10，如果小于10 ，就在前面拼接0，比如是5分30秒，就要在页面上显示05:30:

http://img1.sycdn.imooc.com//climg/5df76aa5096137d410280385.jpg

2、在页面刚显示出来的，进度条的位置不对：

http://img1.sycdn.imooc.com//climg/5df76b7909bffe6a03600098.jpg

应该将宽度比设置为0：

http://img1.sycdn.imooc.com//climg/5df76b8709105de006180242.jpg

3、小圆点的位置也不对：

http://img1.sycdn.imooc.com//climg/5df76f5109b1059302360072.jpg

建议修改下left值：

http://img1.sycdn.imooc.com//climg/5df76f64095946d205590414.jpg

4、同学的偏移值和偏移宽度设置的不合理，导致currentTime受到了影响，并且在获取宽度时，应该使用外层的元素Progressbar，修改参考：

http://img1.sycdn.imooc.com//climg/5df772a50911cde909490170.jpg

http://img1.sycdn.imooc.com//climg/5df773260944b6c111730836.jpg

5、如果同学修改的时候遇到了什么问题，建议同学新建一个问答进行提问，这样老师能更快的看到同学的问题。

6、建议同学按照视频老师的代码实现的时候，要细心点呢。

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

0
收起回答
  • 提问者 小鲜花 #1
    老师 你看这样理解对吗，真正的进度条宽度设置为0,是为了后期百分比跑起来，小圆点设置left-8.5是整个小圆点宽度的一半吗？这里不太明白，代码后面的+9和-8.5我也不太明白，请老师指点
    2019-12-17 09:11:46
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

sublime不能拖动文件夹吗？
9 0 3
老师，我不知道为什么页头不能获取class？
3 0 3
为什么options.x :设为true，而options.y :要设为false？
32 0 5
作业问题，无法收到广播
41 0 8
麻烦老师看看为什么我这在拖动时有时候会出现鼠标还未松开，灰色背景即消失的情况？
12 0 3

登录后可查看更多问答，登录/注册

3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。

了解课程

本课精华内容

问答 作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下 为什么谷歌浏览器 点不了进度条 没次点击都会重新播放 用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师