体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师，帮忙 看一下

来源：4-8 video-javascript（5）

慕仙本仙_

2020-04-04 23:00:37

<!DOCTYPE html>

<html>

<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;

/*border:1px solid black;*/

box-shadow: 0 0 4px #5b606d;

}

.videoNode{

width:540px;

height:305px;

float:left;

background:black;

}

.outerNode .controlsNode{

float:left;

width:540px ;

height:27px;

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;

background-color:red;

}

.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:100%;

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:4px;

}

.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) no-repeat;

position:absolute;

left:-9px;

top:-4px;

cursor: pointer;

z-index:5;

}

.outerNode .controlsNode .timeNode{

float:left;

/*width:55px;*/

width:95px;

height:10px;

margin:7px 0 0 9px;

line-height:10px;

}

.outerNode .controlsNode .timeNode span{

font-size:10px;

color:#fff;

}

.outerNode .controlsNode .volumeNode{

float:left;

width:17px;

height:16px;

margin:5px 0 0 8px;

background: url(images/volume_bg.png) no-repeat;

}

.outerNode .controlsNode .volumnLine{

float:left;

height:8px;

width:61px;

margin:10px 0 0 4px;

background: url(images/volumeLine_bg.png) repeat-x;

position:relative;

}

.outerNode .controlsNode .volumnLine .v-left{

width:3px;

height:100%;

position: absolute;

left:0;

top:0;

background: url(images/v_left.png) no-repeat;;

}

.outerNode .controlsNode .volumnLine .v-right{

width:3px;

height:100%;

position: absolute;

right:0;

top:0;

background: url(images/v_right.png) no-repeat;;

}

.outerNode .controlsNode .volumnLine .v-dragNode{

width:15px;

height:13px;

position:absolute;

left:0;

top:0;

background:url(images/vo_d.png) no-repeat;

cursor: pointer;

top:-3px;

left:-2px;

}

.outerNode .controlsNode .fullNode{

float:left;

width:15px;

height: 17px;

margin:6px 0 0 10px;

background: url(images/full_bg.png) no-repeat;

cursor: pointer;

transition: .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>

<!--播放进度条-->

<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">03:25</span>

</div>

<!--声音的标志-->

<div class="volumeNode"></div>

<!--声音的进度条-->

<div class="volumnLine">

<!--进度条左右弧形-->

<div class="v-left"></div>

<div class="v-right"></div>

<!--拖动进度条的按钮-->

<div class="v-dragNode"></div>

</div>

<!--全屏的按钮-->

<div class="fullNode"></div>

</div>

</div>

</body>

<script type="text/javascript">

var playNode=document.getElementsByClassName('playNode')[0];//播放暂停按钮

var videoNode=document.getElementsByClassName('videoNode')[0];//视频播放器

var fullNode=document.querySelector('.fullNode');//全屏按钮

var nowNode=document.querySelector('.now');//当前时间

var allNode=document.querySelector('.all');//总时间

var lineNode=document.querySelector('.lineNode');//当前的进度条

var crlNode=document.querySelector('.crlNode');//进度条按钮

var loadNode=document.querySelector('.loadNode');

var playBlr=true;

//播放暂停事件

//es6方法

/*

playNode.onclick=function(){

console.log(1);

this.classList.toggle('pauseNode');

}*/

//传统方法

playNode.onclick=function(){

playBlr=!playBlr;

if(playBlr==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();

}

}

//视频总时间的计算

//时间

videoNode.addEventListener('canplay',function(){

var needTime=parseInt(videoNode.duration);

var min=parseInt(needTime/60); 

var sec=parseInt(needTime%60);

var timeNum=toDob(min)+':'+toDob(sec);

console.log(min+'_'+sec);

allNode.innerHTML=timeNum;

},false)

//解决时间不足10的问题

function toDob(time){

return time<10?'0'+time:time;

}

//播放时间的滚动

videoNode.addEventListener('timeupdate',function(){

//看一下目前的进度

lineNode.style.width=videoNode.currentTime/videoNode.duration*100+'%';

//console.log(lineNode.offsetWidth);

crlNode.style.left=lineNode.offsetWidth-9+'px';

var needTime=parseInt(videoNode.currentTime);

var min=parseInt(needTime/60); 

var sec=parseInt(needTime%60);

var timeNum=toDob(min)+':'+toDob(sec);

//console.log(min+'_'+sec);

nowNode.innerHTML=timeNum;

})

//拖拽进度条

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-9;

needX=needX<-9?-9: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(videoNode.duration*((crlNode.offsetLeft+9)/loadNode.offsetWidth))

videoNode.play();

//playBlr=false;

if(playBlr==false){

playNode.className='pouseNode';

videoNode.play();

}else{

playNode.className='playNode';

videoNode.pause();

}

}

}

</script>

</html>

1、拖拽松开以后回到最开始的位置，而不是鼠标停下来的位置

2、拖拽进度条以后，播放、暂停的图标你不见了，下面的播放暂停的切换貌似也有问题


请老师帮忙看一下，用的谷歌最新版本浏览器。。

写回答

1回答

好帮手慕粉

2020-04-06

已采纳

同学你好，是同学在切换状态时，写错了：

http://img.mukewang.com/climg/5e8ac6cb09780b3405110126.jpg

老师这边测试的拖拽效果是正确的，同学再测试下。

祝学习愉快~

0

0 学习 · 6815 问题

查看课程

相似问题

老师，你帮我看下

回答 1

看看那里语法错误

回答 2

老师帮忙看一下

回答 2

老师帮忙看一下

回答 1

老师帮忙看下，类选择器咋不好使了呢

回答 1

打开慕课网App查看更多内容