今天编写一个视频播放器插件，依然采用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();
});至此即完成一个简单的视频播放器。
完整插件下载地址：视频播放器。
3939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
