今天編寫一個視頻播放器插件，依然採用html5+jquery，所需要的知識點和上一篇（音樂播放器）差不多。照例先奉上最終效果圖：
1、創建文件夾：
2、編寫video.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>視頻播放器</title>
<link rel="stylesheet" type="text/css" href="css/video.css">
</head>
<body>
<div class="video">
<div class="tag">無與倫比 爲傑沉迷</div>
<div class="screen">
</div>
<div class="block">
<div class="slider">
<div class="loaded"></div>
<div class="space"></div>
<div class="dot"></div>
</div>
<div class="control">
<div class="left">
<div class="time">
<span class="currentTime">00:00</span>
<span class="divide">/</span>
<span class="totalTime">00:00</span>
</div>
<div class="list"></div>
</div>
<div class="center">
<div class="reset"></div>
<div class="prev"></div>
<div class="current"></div>
<div class="next"></div>
<div class="volume">
<div class="volumeIcon"></div>
<div class="volumeSlider">
<div class="volumeSpace"></div>
<div class="volumeDot"></div>
</div>
</div>
</div>
<div class="right">
<div class="enlarge"></div>
</div>
</div>
</div>
<ul class="playlist"></ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.videoPlay.js"></script>
<script type="text/javascript" src="js/video.js"></script>
</html>功能主要包括：
控制當前視頻播放進度；
前後切換；
音量控制；
顯示隱藏視頻列表；
右下角的按鈕只是讓界面好看點額，有興趣可以自行添加功能 :）
2、編寫video.css文件
*{margin: 0;padding: 0;font-family: "微軟雅黑";}
body{background-color: #000;}
ul{list-style: none;}
.video{
width: 800px;
height: 540px;
margin: 20px auto;
border: 5px solid #f2f2f2;
position: relative;
background-color:#fff;
overflow: hidden;
}
.tag{
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
position: absolute;
top: 0;
z-index: 2;
background-color: rgba(0,0,0,0.5);
opacity: 0;
-webkit-transition:opacity 1s linear;
}
.tag:hover{
opacity: 1;
}
.screen{
width: 100%;
height: 450px;
max-height: 450px;
background-color: #000;
}
video{
width: 800px;
height: 100%;
color: #fff;
margin: 0 auto;
}
.block{
background-color: #fff;
}
.slider{
width: 100%;
height: 4px;
margin-top: 10px;
cursor: pointer;
position: relative;
background-color: #ddd;
}
.loaded,.space{
height: 100%;
position: absolute;
}
.dot{
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #000;
position: absolute;
top: -2px;
opacity: 0;
-webkit-transition:opacity 0.4s linear;
}
.slider:hover .dot{
opacity: 1;
}
.loaded{
background-color: #ccc;
}
.space{
background-color: #222;
}
.control{
width: 98%;
height: 70px;
margin: 6px 1% 0;
}
.left,.right{
width: 22%;
float: left;
}
.time{
width: 100%;
height: 18px;
font-size: 14px;
}
.list{
width: 24px;
height: 38px;
cursor: pointer;
background: url(../img/list.png) center no-repeat;
opacity: 0.6;
}
.center{
width: 56%;
height: 100%;
float: left;
position: relative;
}
.reset,.prev,.next{
width: 44px;
height: 44px;
position: absolute;
top: 13px;
opacity: 0.6;
-webkit-transition:opacity 0.5s linear;
}
.reset:hover,.prev:hover,.next:hover{
opacity: 1;
}
.current{
width: 56px;
height:56px;
position: absolute;
top: 7px;
}
.reset{
left: 10%;
background:url(../img/control.png) top right no-repeat;
}
.prev{
left: 26%;
background:url(../img/control.png) top left no-repeat;
}
.next{
right: 26%;
background:url(../img/control.png) top center no-repeat;
}
.current{
left: 50%;
margin-left: -28px;
background:url(../img/control.png) no-repeat;
background-position: bottom left;
}
.volume{
width: 90px;
height: 30px;
position: absolute;
top: 20px;
right: 0;
}
.volumeIcon{
width: 24px;
height: 30px;
float: left;
background: url(../img/volume.png) center no-repeat;
}
.volumeSlider{
width: 64px;
height: 2px;
cursor: pointer;
float: left;
margin: 14px 0 0 2px;
position: relative;
background-color: #ccc;
}
.volumeSpace{
position: absolute;
height: 100%;
background-color: #000
}
.volumeDot{
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #000;
position: absolute;
top: -3px;
}
.enlarge{
width: 30px;
height: 30px;
cursor: pointer;
margin-top: 20px;
float: right;
background: url(../img/enlarge.png) center no-repeat;
opacity: 0.6;
}
.playlist{
width: 300px;
height: 400px;
padding-top: 50px;
position: absolute;
top: 0;
left: -300px;
background-color: rgba(0,0,0,0.5);
}
.playlist li{
height: 30px;
margin: 5px 0;
cursor: pointer;
line-height: 30px;
text-indent: 20px;
color: #efefef;
}代碼中只考慮在chrome瀏覽器中執行（-webkit-transition），另考慮到瀏覽器的兼容性，這裏簡單介紹一下css3中transition屬性的用法：
transition功能支持從一個屬性值平滑過渡到另一個屬性值，webkit引擎支持-webkit-transition私有屬性，Mozilla gecko引擎支持-moz-transition私有屬性，presto引擎支持-o-transition私有屬性。
transition-property：定義應用動畫的屬性，初始值是all；
transition-duration：定義動畫所用時間，初始值是0(0秒)；
transition-delay：定義動畫延遲時間，屬性初始值是0，設置時間可以爲正數、負數和0，非零時必須設置單位爲s(秒)或者ms(毫秒)，爲負數時，過渡的動作會從該時間點開始顯示，之前的動作被截斷。爲正數時，過渡的動作會延遲出發。
transition-timing-function：定義動畫效果，屬性初始值是ease。
3、編寫jquery.videoPlay.js插件文件
;(function($){
$.fn.videoPlay = function(){
var autoplay = false, //自動播放
isplaying =false, //當前狀態
timeout, //定時器
currentTrack = 0, //當前播放索引
volume = localStorage.volume || 0.8, //音量設定
video, //視頻對象
playlist = [
"周杰倫 - 楓.mkv",
"周杰倫 - 一路向北.mkv"
]; //視頻列表
//加載視頻列表
for (var i = 0; i < playlist.length; i++) {
$('.playlist').append('<li>'+playlist[i]+'</li>');
}
//定義播放函數
var play = function(){
video.play();
timeout = setInterval(updateProgress, 500);
isplaying = true;
}
//定義暫停函數
var pause = function(){
video.pause();
clearInterval(updateProgress);
isplaying = false;
}
//設置進度函數
var setProgress = function(value){
var currentHr = parseInt(value/3600),
currentMin = parseInt(parseInt(value%3600)/60),
currentSec = parseInt(parseInt(value%3600)%60),
hr = currentHr<10?'0'+ currentHr:currentHr,
min = currentMin<10?'0' + currentMin:currentMin,
sec = currentSec<10?'0' + currentSec:currentSec,
ratio = value/video.duration*100;
$('.currentTime').html(hr+':'+min+':'+sec);
$('.space').css('width',ratio + '%');
$('.dot').css('left',ratio-0.5 + '%');
}
//更新進度
var updateProgress = function(){
setProgress(video.currentTime);
}
//給進度條綁定滑動函數
$('.slider').slider({
step:0.5,
slide:function(event,ui){
setProgress(video.duration * ui.value/100);
clearInterval(timeout);
},
stop:function(event,ui){
video.currentTime = video.duration * ui.value/100;
timeout = setInterval(updateProgress,500);
}
})
//設定音量函數
var setVolume = function(value){
video.volume = localStorage.volume = value;
$('.volumeSpace').css('width',value * 100 + '%');
$('.volumeDot').css('left',value * 100 + '%');
}
$('.volumeSlider').slider({
step:0.01,
max:1,
min:0,
value:volume,
slide:function(event,ui){
setVolume(ui.value);
}
})
//切換播放索引
var switchTrack = function(i){
if (i==playlist.length) {
currentTrack = 0;
}else if (i<0) {
currentTrack = playlist.length-1;
}
loadVideo(currentTrack);
if (isplaying==true) {
play();
}
}
//設定加載前函數
var beforeLoad = function(){
var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
$('.loaded').css('width', (100 / (this.duration || 1) * endVal) +'%');
var totalHr = parseInt(video.duration/3600),
totalMin = parseInt(parseInt(video.duration%3600)/60),
totalSec = parseInt(parseInt(video.duration%3600)%60);
totalhr = totalHr<10?'0'+ totalHr:totalHr;
totalmin = totalMin<10?'0' + totalMin:totalMin;
totalsec = totalSec<10?'0' + totalSec:totalSec;
$('.totalTime').html(totalhr+':'+totalmin+':'+totalsec);
}
//設定加載完成函數
var afterLoad = function(){
if (autoplay == true) {
play();
}
}
//設定播放結束函數
var ended = function(){
video.currentTime = 0;
switchTrack(++currentTrack);
}
//設定加載視頻函數
var loadVideo = function(i){
$('.screen').empty();
var newvideo = $('<video>').html('<source src="media/'+playlist[i]+'">'+'您的瀏覽器不支持播放該視頻').appendTo('.screen');
video = newvideo[0];
$('.tag').html(playlist[i]);
$('.playlist li:eq('+i+')').css("color","#fff").siblings().css("color","#efefef");;
video.addEventListener('progress',beforeLoad,false);
video.addEventListener('durationchange',beforeLoad,false);
video.addEventListener('canplay',afterLoad,false);
video.addEventListener('ended',ended,false);
}
loadVideo(currentTrack);
setVolume(volume);
$('.current').on('click',function(){
if (isplaying==false) {
$(this).css('background-position','bottom right');
isplaying = true;
play();
}else{
$(this).css('background-position','bottom left');
isplaying = false;
pause();
}
})
$('.reset').on('click',function(){
pause();
$('.current').css('background-position','bottom left');
isplaying = false;
video.currentTime = 0;
})
$('.prev').on('click',function(){
$('.current').css('background-position','bottom right');
isplaying = true;
switchTrack(--currentTrack);
})
$('.next').on('click',function(){
$('.current').css('background-position','bottom right');
isplaying = true;
switchTrack(++currentTrack);
});
$('.list').toggle(function(){
$(this).css('opacity',1);
$('.playlist').animate({
left:0
},500);
},function(){
$(this).css('opacity',0.6);
$('.playlist').animate({
left:"-300px"
},500);
});
$('.playlist li').each(function(index){
$(this).click(function(){
$(this).css("color","#fff").siblings().css("color","#efefef");
currentTrack = index;
switchTrack(currentTrack);
})
});
}
})(jQuery)4、編寫video.j引用代碼（可以省略，可將插件文件改善一下直接引用即可）
$(document).ready(function(){
$(document).videoPlay();
});至此即完成一個簡單的視頻播放器。
完整插件下載地址：視頻播放器。