今天说一下自定义视频和音乐播放器！直接先看看完成后的效果图把！
视频：
video.jpg
音乐：
音乐.jpg
哈哈，是不是觉得太难看了，根本没心情往下继续看了？那就对了。我也觉得难看，但是重点来了，如果你想要做酷炫的视频，音乐播放器，那你必须先把这些简单的看懂，这里面都是video和audio最基本的一些知识，做出这些丑的，你才有可能做更多更炫的。
ok，先说video；
这里使用了CSS3的video标签。在次基础上添加了一些额外的功能。
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#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;
}
</style>
<script>
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].onclick=function(){
oV.width=800;
};
aBtn[1].onclick=function(){
oV.width=300;
};
aBtn[2].onclick=function(){
if(oV.paused){
oV.play();
this.value='暂停';
}else{
oV.pause();
this.value='播放';
}
};
aBtn[3].onclick=function(){
oV.currentTime++;
};
aBtn[4].onclick=function(){
oV.currentTime--;
};
aBtn[5].onclick=function(){
if(bMute){
oV.muted=true;
this.value='恢复';
}else{
oV.muted=false;
this.value='静音';
}
bMute=!bMute;
};
aBtn[6].onclick=function(){
oV.volume+=0.2;
};
aBtn[7].onclick=function(){
oV.volume-=0.2;
};
aBtn[8].onclick=function(){
oV.webkitRequestFullScreen();
};
oV.ontimeupdate=function(){
console.log(oV.currentTime)
oSpan.style.width=oV.currentTime/oV.duration*100+'%';
};
oJd.onmousedown=function(ev){
var oEvent=ev || event;
disX=oEvent.clientX-oJd.offsetLeft;
oSpan.style.width=disX/500*100+'%';
document.onmousemove=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.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
}
},false);
</script>
<body>
<div id="box">
<input type="button" value="变大"/>
<input type="button" value="变小"/>
<input type="button" value="暂停"/>
<input type="button" value="快进"/>
<input type="button" value="后退"/>
<input type="button" value="静音"/>
<input type="button" value="音量+"/>
<input type="button" value="音量-"/>
<input type="button" value="全屏"/>
<video src="1.mp4" width="500" id="vi"></video>
<div id="jd">
<span></span>
</div>
</div>
</body>
</html>
布局和css大概扫一眼就行，特别简单，不是什么重点。
在新加功能中，说说下面几个涉及到的属性，
首先快进和后退，这里涉及到了一个属性，currentTime（当前时间）；
+快进，-后退，+=2每次快进2s，就这么简单。
其次就是另一个属性volume，音量，和currenTime用法一样；
最后说一说进度条；
看过视频的都知道，进度条不仅反映时间进程，还能拖动选择进程。
这里用div->里面的span的宽度大小来控制进程，
总进程的百分比=currentTime/duration（总时间）*100+‘%’即可，
其次就是这一切都发生在ontimeupdate事件中，这样视频播放时进度条就没问题了，但是还不能够拖动，
拖动特别简单，就是点下的时候，让span的宽度等于你点击到初始的位置的距离，拖动也是一样。
video音乐播放器；
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>智能社 - www.zhinengshe.com</title>
<style>
.on{
background: url("play.gif") right center no-repeat;
padding-right:20px;
}
</style>
<script>
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.length;i++){
aA[i].index = i;
aA[i].ondblclick = function(){
for(var i = 0;i<aA.length;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.length;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);
</script>
</head>
<body>
<audio id="a1" src="" controls></audio>
<h3>双击开始播放</h3>
<ul>
<li><a href="javascript:;">时间都去哪儿了</a></li>
<li><a href="javascript:;">小苹果</a></li>
<li><a href="javascript:;">夜的钢琴曲</a></li>
<li><a href="javascript:;">雨的印记</a></li>
<input type="button" value="单曲循环">
<input type="button" value="顺序播放">
<input type="button" value="随机播放">
<input type="button" value="循环播放">
</ul>
</body>
</html>
非常简单，只需要知道onended事件是当audio播放完成后就行，
网友评论