css3音乐播放器,CSS3-自定义视频与音乐播放器！

今天说一下自定义视频和音乐播放器！直接先看看完成后的效果图把！

视频：

video.jpg

音乐：

音乐.jpg

哈哈，是不是觉得太难看了，根本没心情往下继续看了？那就对了。我也觉得难看，但是重点来了，如果你想要做酷炫的视频，音乐播放器，那你必须先把这些简单的看懂，这里面都是video和audio最基本的一些知识，做出这些丑的，你才有可能做更多更炫的。

ok，先说video；

这里使用了CSS3的video标签。在次基础上添加了一些额外的功能。

Code:

#box{

width: 500px;

margin: 50px auto;

}

#jd{

width: 100%;

height: 20px;

background: #ccc;

}

#jd span{

width: 0%;

height: 100%;

background: red;

display: block;

position: relative;

}

#jd span em{

width: 20px;

height: 20px;

background: blue;

border-radius: 50%;

position: absolute;

top: 0;

right: 0;

}

document.addEventListener('DOMContentLoaded',function(){

var aBtn=document.getElementsByTagName('input');

var oV=document.getElementById('vi');

var oSpan=document.getElementsByTagName('span')[0];

var oEm=document.getElementsByTagName('em')[0];

var oJd=document.getElementById('jd');

var bMute=true;

aBtn[0].οnclick=function(){

oV.width=800;

};

aBtn[1].οnclick=function(){

oV.width=300;

};

aBtn[2].οnclick=function(){

if(oV.paused){

oV.play();

this.value='暂停';

}else{

oV.pause();

this.value='播放';

}

};

aBtn[3].οnclick=function(){

oV.currentTime++;

};

aBtn[4].οnclick=function(){

oV.currentTime--;

};

aBtn[5].οnclick=function(){

if(bMute){

oV.muted=true;

this.value='恢复';

}else{

oV.muted=false;

this.value='静音';

}

bMute=!bMute;

};

aBtn[6].οnclick=function(){

oV.volume+=0.2;

};

aBtn[7].οnclick=function(){

oV.volume-=0.2;

};

aBtn[8].οnclick=function(){

oV.webkitRequestFullScreen();

};

oV.οntimeupdate=function(){

console.log(oV.currentTime)

oSpan.style.width=oV.currentTime/oV.duration*100+'%';

};

oJd.οnmοusedοwn=function(ev){

var oEvent=ev || event;

disX=oEvent.clientX-oJd.offsetLeft;

oSpan.style.width=disX/500*100+'%';

document.οnmοusemοve=function(ev){

var oEvent=ev || event;

disX=oEvent.clientX-oJd.offsetLeft;

var scale=disX/500*100+'%'

oSpan.style.width=scale;

oV.currentTime=oV.duration*disX/500;

}

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

return false;

}

},false);

布局和css大概扫一眼就行，特别简单，不是什么重点。

在新加功能中，说说下面几个涉及到的属性，

首先快进和后退，这里涉及到了一个属性，currentTime(当前时间)；

+快进，-后退，+=2每次快进2s，就这么简单。

其次就是另一个属性volume，音量，和currenTime用法一样；

最后说一说进度条；

看过视频的都知道，进度条不仅反映时间进程，还能拖动选择进程。

这里用div->里面的span的宽度大小来控制进程，

总进程的百分比=currentTime/duration(总时间)*100+‘%’即可，

其次就是这一切都发生在ontimeupdate事件中，这样视频播放时进度条就没问题了，但是还不能够拖动，

拖动特别简单，就是点下的时候，让span的宽度等于你点击到初始的位置的距离，拖动也是一样。

video音乐播放器；

Code：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

智能社 - www.zhinengshe.com

.on{

background: url("play.gif") right center no-repeat;

padding-right:20px;

}

document.addEventListener('DOMContentLoaded',function(){

var aBtn = document.querySelectorAll('input');

var aA = document.querySelectorAll('ul li a');

var oA = document.getElementById('a1');

var iNow = 0;

var arrSong = [

'时间都去哪儿了',

'小苹果',

'夜的钢琴曲',

'雨的印记'

];

for(var i = 0;i

aA[i].index = i;

aA[i].ondblclick = function(){

for(var i = 0;i

aA[i].className = '';

}

iNow = this.index;

play();

};

}

aBtn[0].onclick = function(){

oA.playState = 0;

};

aBtn[1].onclick = function(){

oA.playState = 1;

};

aBtn[2].onclick = function(){

oA.playState = 2;

};

aBtn[3].onclick = function(){

oA.playState = 3;

};

oA.onended = function(){

switch (oA.playState){

case 0:

oA.play();

break;

case 1:

iNow++;

if(iNow==arrSong.length){return;}

play();

break;

case 2:

iNow =rnd(0,arrSong.length);

play();

break;

case 3:

iNow++;

if(iNow==arrSong.length){iNow = 0}

play();

break;

}

};

function play(){

for(var i = 0;i

aA[i].className = '';

}

aA[iNow].className = 'on';

oA.src = 'mp3/'+arrSong[iNow]+'.mp3';

oA.play();

}

function rnd(m,n){return parseInt(m+Math.random()*(n-m));}

},false);

双击开始播放

时间都去哪儿了 小苹果 夜的钢琴曲 雨的印记

非常简单，只需要知道onended事件是当audio播放完成后就行，