进度条按钮无法拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyVideo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outerNode">
<!-- 视频播放部分 -->
<video class="videoNode" src="data/imooc.mp4" poster="data/poster.jpg"></video>
<!-- 控制条 -->
<div class="controlsNode">
<!-- 开始/停止按钮 -->
<div class="playNode"></div>
<!-- 进度条 -->
<div class="loadNode">
<!-- 进度条上的拖动按钮 -->
<div class="ctrlNode"></div>
<!-- 真正的进度条 -->
<div class="load_line"></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_DragNode"></div>
</div>
<!-- 全屏按钮 -->
<div class="fullscreenNode"></div>
</div>
</div>
<script src="video.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
.outerNode{
width: 540px;
height: 332px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -166px;
margin-left: -270px;
overflow: hidden;
/* font-size: 0; 该句会使白边缩小，但不会完全消失 */
background-color: black;
}
.videoNode{
width: 540px;
height: 305px;
/*video是行内元素，默认带白边，变为块级元素后白边消失*/
display: block;
}
.controlsNode{
width: 540px;
height: 27px;
background: url(images/ctrs_bg.gif);
overflow: hidden;
}
.playNode{
width: 14px;
height: 14px;
float: left;
margin: 6.5px 0 0 16px;
background: url(images/playNode.png);
}
.pauseNode{
width: 14px;
height: 14px;
float: left;
margin: 6.5px 0 0 16px;
background: url(images/pause.png);
}
.loadNode{
width: 180px;
height: 10px;
background: url(images/load_bg.png);
float: left;
margin-top: 8px;
margin-left: 12px;
border-radius: 4px;
position: relative;
}
.load_line{
width: 0;
height: 7px;
position: absolute;
left: 0;
top: 1.5px;
background: url(images/line_bg.png);
border-radius: 3px;
}
.ctrlNode{
width: 16px;
height: 16px;
background: url(images/crl_bg.png);
position: absolute;
left: 0;
top: -3px;
z-index: 3;
margin-left: 0;
}
.timeNode{
float: left;
width: 80px;
height: 16px;
margin: 5.5px 0 0 8px;
color: #fff;
font-size: 12px;
}
.volumeNode{
width: 17px;
height: 17px;
background: url(images/volume_bg.png);
float: left;
margin: 5px 0 0 32px;
}
.volumeLine{
width: 100px;
height: 10px;
background: url(images/volumeLine_bg.png);
border-radius: 4px;
float: left;
margin: 8.5px 0 0 8px;
position: relative;
}
.v_DragNode{
width: 16px;
height: 16px;
background: url(images/crl_bg.png);
position: absolute;
left: 20px;
top: -3px;
}
.fullscreenNode{
width: 15px;
height: 15px;
background: url(images/full_bg.png);
float: left;
margin: 5.5px 0 0 48px;
}
var playNode = document.querySelector(".playNode"),
videoNode = document.querySelector(".videoNode"),
fullNode = document.querySelector(".fullscreenNode"), /*全屏*/
nowTime = document.querySelector(".now"), /*当前时间*/
allTime = document.querySelector(".all"), /*视频长度*/
load_line = document.querySelector('.load_line'), /*进度条*/
ctrlNode = document.querySelector(".ctrlNode"), /*进度条上的拖动按钮*/
loadNode = document.querySelector('.loadNode'), /*进度条外层*/
playBtn = true;
// 播放暂停
playNode.onclick = function(){
playBtn = !playBtn;
if(playBtn == false){
this.className = "pauseNode";
videoNode.play();
}
else{
this.className = "playNode";
videoNode.pause();
}
}
// 全屏
fullNode.onclick = function(){
// 各浏览器兼容
if(videoNode.webkitRequestFullScreen){
videoNode.webkitRequestFullScreen();
}
else if(videoNode.mozRequestFullScreen){
videoNode.mozRequestFullScreen();
}
else{
videoNode.requestFullscreen();
}
}
//分或秒不足10秒的前面加0
function addO(time){
return time<10? "0"+ time : time;
}
//视频时间:用canplay解决时间NaN问题
videoNode.addEventListener("canplay", function(){
var allSeconds = parseInt(videoNode.duration);
var s = allSeconds % 60;
var m = parseInt(allSeconds / 60);
allTime.innerHTML = addO(m) + ':' + addO(s);
}, false);
//当前播放时间:时间要动起来
videoNode.addEventListener("timeupdate", function(){
//播放进度条：长度是当前播放时间占总时间的比例
load_line.style.width = videoNode.currentTime/videoNode.duration*100 + "%";
//进度条上的拖动按钮：和进度条位置一致
if(load_line.offsetWidth - 16 <= 0){
ctrlNode.style.left = 0 + "px";
}else{
ctrlNode.style.left = load_line.offsetWidth - 16 + 'px';
}
//当前时间
var nowSeconds = parseInt(videoNode.currentTime);
var now_s = nowSeconds % 60;
var now_m = parseInt(nowSeconds / 60);
nowTime.innerHTML = addO(now_m) + ':' + addO(now_s);
}, false);
//拖拽进度条按钮
ctrlNode.onmousedown = function(e){
var ev = e || window.event;
var l = ev.clientX - this.offsetLeft;
console.log(ev.clientX);
console.log(this.offsetLeft);
//拖动必须写在mousedown里
document.onmousemove = function(e){
var ev = e || window.event;
var needX = ev.clientX - l;
console.log(needX);
if( needX < 0){
needX = 0;
}else if(needX > loadNode.offsetWidth){
needX = loadNode.offsetWidth + 'px';
}
};
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
};
};
正在回答
同学你好，鼠标拖拽时，并没有改变ctrlNode的位置以及load_line的宽度，所以视觉上，没有拖拽效果，修改如下：
祝学习愉快！
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星