为什么进度拖拽不了

为什么进度拖拽不了

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
* {
           margin: 0;
padding: 0;
list-style: none;
}

       .outerNode {
           width: 540px;
height: 332px;
position: absolute;
left: 50%;
top: 50%;
margin: -166px 0 0 -270px;
box-shadow: 0 0 4px #5b606d;
}

       .outerNode .videoNode {
           width: 540px;
height: 305px;
float: left;
background: black;
}

       .outerNode .controlsNode {
           width: 540px;
height: 27px;
float: left;
background: url(images/ctrs_bg.gif) repeat-x;
}

       .outerNode .controlsNode .playNode {
           float: left;
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url(images/playNode.png) no-repeat;
cursor: pointer;
}

       .outerNode .controlsNode .pauseNode {
           float: left;
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url(images/pause.png) no-repeat;
cursor: pointer;
}


       .outerNode .controlsNode .loadNode {
           width: 267px;
height: 10px;
margin: 9px 0 0 14px;
float: left;
background: url(images/load_bg.png) repeat-x;
position: relative;
}

       .outerNode .controlsNode .loadNode .lineNode {
           width: 0%;
height: 7px;
position: absolute;
left: 0;
top: 1px;
background: url(images/line_bg.png) repeat-x;

}

       .outerNode .controlsNode .loadNode .lineNode .lineRight {
           width: 2px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: url(images/line_r_bg.png) no-repeat;
}

       .outerNode .controlsNode .loadNode .loadLeft {
           height: 100%;
width: 3px;
position: absolute;
left: 0;
top: 0;
background: url(images/left_bg.png) no-repeat;
z-index: 4;
}

       .outerNode .controlsNode .loadNode .loadRight {
           height: 100%;
width: 3px;
position: absolute;
right: 0;
top: 0;
background: url(images/right_bg.png) no-repeat;
}

       .outerNode .controlsNode .loadNode .crlNode {
           width: 17px;
height: 17px;
background: url(images/crl_bg.png);
position: absolute;
left: -8.5px;
top: -3.5px;
cursor: pointer;
z-index: 5;
}

       .outerNode .controlsNode .timeNode {
           float: left;
width: 75px;
height: 10px;
margin: 9px 0 0 9px;
}

       .outerNode .controlsNode .timeNode span {
           font-size: 10px;
float: left;
line-height: 10px;
color: white;
}

       .outerNode .controlsNode .volumeNode {
           width: 17px;
height: 16px;
float: left;
margin: 5px 0 0 6px;
background: url(images/volume_bg.png);
}

       .outerNode .controlsNode .volumeLine {
           height: 8px;
width: 61px;
float: left;
margin: 10px 0 0 4px;
background: url(images/volumeLine_bg.png) repeat-x;
position: relative;
}

       .outerNode .controlsNode .volumeLine .v_left {
           width: 3px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url(images/v_left.png) no-repeat;
}

       .outerNode .controlsNode .volumeLine .v_right {
           width: 3px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: url(images/v_right.png) no-repeat;
}

       .outerNode .controlsNode .volumeLine .v_DragNode {
           width: 15px;
height: 13px;
position: absolute;
left: 58.5px;
top: -3.5px;
background: url(images/vo_d.png) no-repeat;
cursor: pointer;
}

       .outerNode .controlsNode .fullNode {
           width: 15px;
height: 17px;
float: left;
margin: 6px 0 0 35px;
background: url(images/full_bg.png) no-repeat;
cursor: pointer;
transition: 0.7s;
}

       .outerNode .controlsNode .fullNode:hover {
           background: url(images/full_hover_bg.png) no-repeat;
}

   </style>

</head>
<body>
<!-- 最外层的元素 -->
<div class='outerNode'>
<!-- video元素 -->
<video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
<!-- 控制器的元素 -->
<div class='controlsNode'>
<!-- 控制播放暂停的按钮 -->
<div class='playNode'></div>
<!-- video的进度条 -->
<div class='loadNode'>
           <div class='loadLeft'></div>
           <div class='loadRight'></div>
<!-- 拖动进度条的按钮 -->
<div class='crlNode'></div>
<!-- 真正的进度条 -->
<div class='lineNode'>
               <div class='lineRight'></div>
           </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 就是播放器
//PlayBln 控制暂停播放的布尔值
//FullNode 全屏按钮
//nowNode 当前时间
//allNode 视频的全部时间
//LineNode 当前的进度条
//CrlNode 进度条按钮
//LoadNode 进度条外面的元素
var PlayNode = document.getElementsByClassName('playNode')[0],
VideoNode = document.getElementsByClassName('videoNode')[0],
FullNode = document.querySelector('.fullNode'),
nowNode = document.querySelector('.now'),
allNode = document.querySelector('.all'),
LineNode = document.querySelector('.lineNode'),
CrlNode = document.querySelector('.crlNode'),
LoadNode = document.querySelector('.loadNode'),
VDragNode = document.querySelector('.v_DragNode'),
PlayBln = true;

//播放、暂停的事件
PlayNode.onclick = function () {
       //传统的通过布尔值去改变classname的方法
PlayBln = !PlayBln;
if (PlayBln == false) {
           this.className = 'pauseNode';
VideoNode.play();

} else {
           this.className = 'playNode';
VideoNode.pause();
}
       //console.log(1);
       //console.log(PlayNode.classList);
       //可以使用classList.toggle方法来切换
//this.classList.toggle('pauseNode');
};

//全屏按钮的事件
FullNode.onclick = function () {
       if (VideoNode.webkitRequestFullscreen) {
           VideoNode.webkitRequestFullscreen();
} else if (VideoNode.mozRequestFullScreen) {
           VideoNode.mozRequestFullScreen();
} else {
           VideoNode.requestFullscreen();
}
   };

//视频的总时间的计算
/*
   setTimeout(function(){
       allNode.innerHTML = VideoNode.duration;

   },100);
   */
   //解决了 上来时间的NAN的问题
VideoNode.addEventListener('canplay', function () {
       //allNode.innerHTML = VideoNode.duration;
var needTime = parseInt(VideoNode.duration);
var s = needTime % 60;
var m = parseInt(needTime / 60);
var timeNum = toDou(m) + ':' + toDou(s);
allNode.innerHTML = timeNum;
}, false);

//解决 时间不足10 的一个问题
function toDou(time) {
       return time < 10 ? '0' + time : time;
}

   //当视频播放的时候 需要当前的时间动起来
VideoNode.addEventListener('timeupdate', function () {
       //看一眼目前的 百分比进度
//console.log(VideoNode.currentTime/VideoNode.duration*100);
LineNode.style.width = VideoNode.currentTime / VideoNode.duration * 100 + '%';

//console.log(LineNode.offsetWidth)
CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'

var needTime = parseInt(VideoNode.currentTime);
var s = needTime % 60;
var m = parseInt(needTime / 60);
var timeNum = toDou(m) + ':' + toDou(s);
nowNode.innerHTML = timeNum;
}, false);

//声音的拖拽按钮
VDragNode.onmousedown = function (e) {
       var ev = e || event;
var l = ev.clientX - this.offsetLeft;
document.onmousemove = function (e) {
           var ev = e || event;
var needX = ev.clientX - l;
var maxX = VDragNode.parentNode.offsetWidth - 2.5;

needX = needX < -2.5 ? -2.5 : needX;
needX = needX > maxX ? maxX : needX;
//计算0 - 1
           //console.log((VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth);
           // console.log((VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth);
var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth;
VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;

VDragNode.style.left = needX + 'px';
};
document.onmouseup = function (e) {
           document.onmousemove = document.onmouseup = null;
}
       return false;
}
   //拖拽进度条按钮
CrlNode.onmousedown = function (e) {
       var ev = e || event;
var l = ev.clientX - this.offsetLeft;
VideoNode.pause();

document.onmousemove = function (e) {
           var ev = e || event;
var needX = ev.clientX - l;
var maxX = LoadNode.offsetWidth - 8.5;

needX = needX < -8.5 ? -8.5 : needX;
needX = needX > maxX ? maxX : needX;
CrlNode.style.left = needX + 'px';
LineNode.style.width = (CrlNode.offsetLeft + 9) / LoadNode.offsetWidth * 100 + '%';


};
document.onmouseup = function () {
           document.onmousemove = document.onmouseup = null;

VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft + 9) / LoadNode.offsetWidth;
//console.log((CrlNode.offsetLeft+9)/LoadNode.offsetWidth);
           //console.log()

           //VideoNode.play();
           //PlayBln = false;
           //className = 'pauseNode';
if (PlayBln == false) {
               //console.log(1);
PlayNode.className = 'pauseNode';
VideoNode.play();
} else {
               //console.log(2);
PlayNode.className = 'playNode';
VideoNode.pause();
}
       };
return false;
};


</script>
</body>
</html>
qq_浮巷旧人_0 2019-02-21
源自：HTML5音视频   4-9 video-javascript（6）
0
收起

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

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

2回答
好帮手慕星星 2019-02-22 10:56:53

同学用的是webstorm编辑器内置的Chrome吗？

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

这样测试确实是有问题的，拖动进度条之后，进度条还会回到原位置。

建议直接使用浏览器将文件打开，不使用编辑器中内置的浏览器，这样就不会有问题了。

再试试吧。

0
收起回答
好帮手慕星星 2019-02-22 10:24:21

你好，使用Chrome浏览器测试，进度条是可以拖拽成功的呢：

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

建议同学再测试一下，祝学习愉快！

0
收起回答
  • 提问者 qq_浮巷旧人_0 #1
    我是用的webstorm，谷歌浏览器，测试没有这个效果，无法拖拽成功
    2019-02-22 10:33:18
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

进度条按钮无法拖拽
13 0 8
为什么storyboard里的控件拖拽不进代码区呢?
13 0 3
你好，我的JS代码里进度条拖拽鼠标松开后不能进度条不能固定
42 0 5
进度条拖拽问题
39 0 4
给ondragend设置了preventDefault()，为什么结束拖拽时还会打开新页面
7 0 3

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

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

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

在线咨询

领取优惠

免费试听

领取大纲

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