也是這段時間整理電腦，發現很多以前做的小案例，有些存在U盤中的項目已經打不開了（U盤壞了,欲哭！），現在有空了就往博客上發一些，以示永不停止的學習和總結（放在線上的資料不僅可以和大家分享還能隨時學習，而且丟的可能性很低啦）。
html和js代碼：
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義播放器</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="content" >
<video id="video" >
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="">
</video>
<div class="customCon">
<a href="javascript:;" class="stopToP" style="display: block;" ></a>
<a href="javascript:;" class="playToS" style="display: none;" ></a>
<div class="progressBox">
<div class="progressVideo">
<div class="overVideo">
<span></span>
</div>
</div>
</div>
<div class="overTime">00:00</div>
<span class="spTime" >/</span>
<div class="allTime">01:29</div>
<div class="progressBox2">
<div class="progressAudio">
<div class="overAudio">
<span></span>
</div>
</div>
</div>
<a href="javascript:;" class="fullScreen"></a>
</div>
</div>
<script type="text/javascript">
// 獲取視頻信息
var oVideo = document.querySelector('#video');
// 獲取播放暫停按鈕
var oStopToP = document.querySelector('.stopToP');
var oPlayToS = document.querySelector('.playToS');
// 獲取時間
var oOverTime = document.querySelector('.overTime');
var oAllTime = document.querySelector('.allTime');
// 播放進度條
var oProgress = document.querySelector('.progressVideo');
var oOver = document.querySelector('.overVideo');
// 時間進度條
var oProgressA = document.querySelector('.progressAudio');
var oOverA = document.querySelector('.overAudio');
// 全屏
var ofullScreen = document.querySelector('.fullScreen');
// 所有視頻播放（暫停）的前提條件就是視頻可播放
oVideo.addEventListener('canplay',function(){
oVideo.removeEventListener('canplay', arguments.callee);
// 點擊暫停按鈕，它轉化爲播放按鈕，視頻同時播放（注意先判斷視頻的狀態）
oStopToP.onclick = function(){
oVideo.play();
stopState();
}
// 點擊播放按鈕，它轉化爲暫停按鈕，視頻同時停止（注意先判斷視頻的狀態）
oPlayToS.onclick = function(){
oVideo.pause();
playState();
}
// 獲取視頻的總時間，傳遞給oAllTime中，注意時間轉化爲分秒的形式
oAllTime.innerHTML = timeT(oVideo.duration);
oVideo.addEventListener("timeupdate",function(){
oOverTime.innerHTML =timeT(oVideo.currentTime);
// 讓視頻的進度條隨着時間的播放而走動
oOver.style.width = oVideo.currentTime/oVideo.duration*100+"%";
},false)
// 注意分析，當點擊進度條上的任何一個地方需要，發生的變化：
// 1，進度條走到那裏（通過offsetX事件可自動獲取）
// 2，用當前時間(oVideo.currentTime)跳轉到那裏以控制視頻也跳到那裏,
// 不要賦值給oAllTime.innerHTML，因爲它無法控制視頻的播放，而且上面已經給過，
// 注意offsetX，獲取的是你點擊的這個物體的地方到它的最左邊的距離用px表示，而我們設置用的是%類型
oProgress.addEventListener("click",function(event){
var x = event.offsetX;
var width = this.offsetWidth;
var scale = x/width;
oOver.style.width = scale*100+"%";
oVideo.currentTime = scale*oVideo.duration;
},false)
oProgressA.addEventListener("click",function(event){
var x = event.offsetX;
var width = this.offsetWidth;
var scale = x/width;
oOverA.style.width = scale*100+"%";
oVideo.volume = scale;
},false)
// 如果視頻結束返回初始狀態
oVideo.addEventListener('ended',function(){
this.currentTime=0;
playState();
},false)
// 全屏
ofullScreen.addEventListener("click",function(){
oVideo.webkitRequestFullScreen();
},false)
},false)
// 把時間轉化成分秒的方式，用同一個變量來存放不同時期的值
function timeT(num){
var m = Math.floor(num/60);
var s = Math.floor(num%60);
m = m > 9 ? m : "0" + m;
s = s > 9 ? s : "0" + s;
return m + ":" + s;
}
// 播放狀態
function playState(){
if(oVideo.paused){
oStopToP.style.display = "block";
oPlayToS.style.display = "none";
}
}
// 暫停狀態
function stopState(){
if(!oVideo.paused){
oStopToP.style.display = "none";
oPlayToS.style.display = "block";s
}
}
</script>
</body>
</html>相應css樣式：
*{
padding: 0px;
margin: 0px;
}
body{
width: 100%;
background: rgb(69,63,63);
}
.content{
width: 500px;
/*border: 6px solid red;*/
margin: 0 auto;
}
video{
width: 500px;
float: left;
}
.customCon{
box-sizing: border-box;
width: 500px;
height: 45px;
border-top: 2px solid rgb(69,63,63);
background: rgb(234,234,234);
float: left;
position: relative;
}
.stopToP,.playToS{
float: left;
width: 40px;
height: 40px;
/*border: 1px solid red;*/
}
.customCon a:nth-child(1){
background: url(../images/sprite.png) no-repeat 0px 4px;
display: block;
}
.customCon a:nth-child(2){
background: url(../images/sprite.png) no-repeat -40px 4px;
display: none;
}
.progressBox{
width: 250px;
height: 9px;
line-height: 20px;
/*border:1px solid red;*/
background: #706d6d;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin-top: 18px;
float: left;
box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
-webkit-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
-moz-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
}
/*記得寬度都要用 %來表示,且給子元素定位時，
一定要給確認的父元素加position: relative;，因爲它的%寬度會和父元素的一樣
,注意要減去按鈕本身的寬度*/
.progressVideo{
width: 97%;
height: 9px;
/*border:1px solid red;*/
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
cursor: pointer;
position: relative;
}
.overVideo{
width: 0%;
height: 9px;
display: inline-block;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: url(../images/play-bar.png) repeat-x;
position: absolute;
}
.overVideo span{
/*border:1px solid red;*/
width: 16px;
height: 16px;
background: url(../images/handle.png) no-repeat;
position: absolute;
top: -3px;
right: -10px;
}
.overTime,.allTime,.spTime{
float: left;
color: rgb(102,107,77);
font-size: 13px;
/*border:1px solid red;*/
margin-top: 13px;
}
.overTime{
margin-left: 5px;
}
.allTime{
margin-right: 5px;
}
.spTime{
font-size: 12px;
margin:12px 5px 0 5px;
}
.progressBox2{
float: left;
width: 80px;
height: 9px;
background: rgb(112,109,109);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
cursor: pointer;
margin-top: 17px;
/*border:1px solid blue;*/
box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
-webkit-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
-moz-box-shadow:inset 0px 1px 4px rgba(0,0,0,0.4),0px 1px 0px rgba(255,255,255,0.4);
}
.progressAudio{
/*border:1px solid red;*/
width: 89%;
height: 9px;
position: relative;
}
.overAudio{
/*border:1px solid red;*/
width: 50%;
height: 9px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: rgb(112,109,109);
display: inline-block;
position: absolute;
}
.progressAudio span{
/*display: inline-block;*/
/*border:1px solid red;*/
width: 10px;
height: 9px;
background: url(../images/volume.png) no-repeat;
position: absolute;
top: 0px;
right: -9px;
}
.fullScreen{
float: left;
width: 20px;
height: 20px;
/*border:1px solid red;*/
background: url(../images/sprite.png) no-repeat -160px -8px;
margin: 10px 0 0 10px;
}