效果图：
video.html
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>video</style> *{margin:0;paddinglist-style none} /*body{background:#d0d8e9;}*/ 要么不加position，如果加了则必须同时设置body和height高度为100%*/ html,body background#d0d8e9 position relative height100%; } .Boxwidth540pxheight332pxBox-shadow0 0 4px #d0d8e9position absoluteleft50%top-166px 0 0 -270px .videoNode305pxfloat布局可以清除上下间的空隙floatbackground-color #000 .ctrNode27pxgif格式容量更小backgroundurl(data/ctrl_bg.gif) repeat-x .playNode13px15px6px 0 0 14pxpng更清晰url(data/playbtn.png) no-repeatcursorpointer .pauseNodeurl(data/pause.png) no-repeat} 时间进度条部分 .processNode260px9pxurl(data/ctrl_bg.gif) top repeat-x9px 0 0 14px .processLeft-2pxurl(data/proleft.png) no-repeat4px .processRightrighturl(data/right_bg.png) no-repeat .processCircle-8.5px-3pxurl(data/circle.png) no-repeat17pxz-index5 .lineNode0%url(data/line_bg.png) repeat-x .lineRight2px7pxurl(data/line_r_bg.png) no-repeat声音进度条部分 .timeNode57px10px9px 0 0 9px .timeNode spanline-heightfont-sizecolor#fff .volumeNode19px6px 10px 0 17pxurl(data/volume.png) no-repeat .vProcessNode61pxbackground:url(data/probg.gif) top repeat-x;9px 0 0 4px .vLineNode1px .vLineRight #vCircleNode52px全屏部分 .fullNodeurl(data/full.png) no-repeat6px 0 0 40px .fullNode:hovertransformscale(1.1)transition:all .5s;} bodydiv class="Box"> video ="videoNode" src="data/imooc.mp4" poster="data/poster.jpg"></video="ctrNode"> <!-- 声音播放 --> ="playNode"div 时间调节 ="processNode"> ="processLeft"="processRight"="processCircle" id="circleNode" 真正的进度条 --> ="lineNode"> ="lineRight" 时间显示 ="timeNode"span ="now">00:00span>-="all"="volumeNode" 音量调节 ="vProcessNode"="vCircleNode"="vLineNode"="vLineRight" 全屏 ="fullNode"> script> var playNode=document.getElementsByClassName("playNode)[],videoNodevideoNodedocument.querySelector(.fullNode),// 声音显示 nowNode.now.all 时间进度条 processNode.processNode.lineNode#circleNode#processCircle 声音进度条 vProcessNode.vProcessNode.vLineNodetrue; 播放暂停 playNode.onclickfunction(){ es6语法 注意：要切换的样式一定要在初始样式的下面定义，否则无法进行覆盖 this.classList.toggle("pauseNode"); 传统语法 playState=!playState; if(playState){ this.className; videoNode.pause(); }else{ pauseNode; videoNode.play(); } } 全屏 fullNode.onclick(videoNode.webkitRequestFullscreen){ videoNode.webkitRequestFullscreen(); }else (videoNode.mozRequestFullScreen){ videoNode.mozRequestFullScreen(); }{ videoNode.requestFullscreen(); } } 时间显示（解决时间初始的NaN问题） videoNode.addEventListener(canplay,1)"> durationvideoNode.duration; aMintoDou(parseInt(duration/60)); aSec%60)); allNode.innerHTMLaMin+aSec; },1)">false); 视频播放时，更新当前时间 timeupdate curTimevideoNode.currentTime; cMintoDou(parseInt(curTime cSec)); nowNode.innerHTMLcMincSec; 进度条运动 lineNode.style.width(curTimevideoNode.duration*100)+"%"; circleNode.style.leftlineNode.offsetWidth-8.5px; },1)">时间格式转换 toDou(time){ return time<10?time:time; } 拖拽进度条 circleNode.onmousedown(e){ videoNode.pause(); ele||event;有些IE版本无法获取事件对象e，只能通过window.event来获取 offsetLeft是一个元素到父级左边的距离 clientX返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标 l是还没运动时，circleNode中心点距离屏幕左边的距离 lel.clientX.offsetLeft; 将鼠标移动和抬起事件绑定在document上是为了防止鼠标拖动过快，超出拖动的元素，不能正常拖动和抬起无效，鼠标再次移入的时候会出现问题。 如果绑定到crlNode，鼠标移动过快的时候，移出这个元素，就不能正常的拖动 document.onmousemove(e){ event; el.clientX是鼠标按下位置距离浏览器页面（或客户区）的水平位置 needX是circleNode距离初始位置移动的距离 needXl; 控制左右边界 maxXprocessNode.offsetWidth; needXneedX<-?-:needX; needXmaxXmaxX:needX; offsetLeft是只读模式，改变位置要用style.left circleNode.style.left; 进度跟着走 +9是为了保证左右两端分别是0和1 lineNode.style.width(circleNode.offsetLeft9)processNode.offsetWidth*100+"%"; } document.onmouseup(){ 鼠标松开时清除事件 document.onmousemovedocument.onmouseupnull; videoNode.currentTimevideoNode.duration*processNode.offsetWidth; videoNode.play(); playState(playState){ playNode.className; videoNode.pause(); }{ playNode.className; videoNode.play(); } } return 阻止默认事件 } 拖拽声音 vCircleNode.onmousedown(e){ event; .offsetLeft; document.onmousemoveevent; vProcessNode.offsetWidthmaxX:needX; vCircleNode.style.left; vLineNode.style.width(vCircleNode.offsetLeftvProcessNode.offsetWidth*100+"%"; toVolumevProcessNode.offsetWidth; toVolumetoVolume:toVolume; videoNode.volumetoVolume; } document.onmouseup(){ document.onmousemove; } ; } html>
知识点补充：
onmouseup事件与onmousemove事件并不冲突，即使鼠标已经松开，也可以执行onmousemove事件
offsetLeft是只读模式，改变要用style.left
在做拖动功能，但是遇到如下图所示问题：
在点击CrlNode然后把鼠标往下移的时候会出现一个禁止符号，然后再松开鼠标，onmousemove事件并没有置null
后面鼠标左右移动的时候我已经松开了鼠标，但是CrlNode还是会跟着两边跑
这是因为拖动的时候鼠标直接到了页面中，相当于把按钮拖拽到页面中，而元素默认是不允许被放置的，需要阻止默认事件
