鉴于html5Audio and video的使用，设计了一个自定义风格的播放器，除实现一些基本的默认功能之外，还实现了一些高级功能。
具体功能如下：
实现播放暂停按钮
实现静音按钮
实现音量调节滑动条
实现播放进度控制条
实现显示播放时间
实现停止按钮
实现缓冲进度控制条
实现播放速率选择按钮
实现全屏播放按钮
实现关灯按钮
文件目录如下：
1、搭建程序显示框架——video.html
<!DOCTYPE html>
<html>
<head>
<title>Audio and video</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/video.css" rel="external nofollow" >
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<header>
<h1>html5 Audio and video</h1>
</header>
<section id="wrapper">
<div class="videoContainer">
<video id="myVideo" src="jiehun.mp4" controls >
sorry ,不支持！
</video>
<div class="caption">html5 Audio and video</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span>/
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">speed:</div>
<div class="btnX1 btn text selected" title="Normal speed">X1</div>
<div class="btnX3 btn text " title="Fast forword X3">X3</div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="btnLight btn lighton" title="Turn on/off light"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
<div class="sound sound2 btn" title="Mute/unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</section>
<footer>
<span>Write by wang from csust</span>
</footer>
</body>
<script type="text/javascript" src="js/video.js"></script>
</html>
2、播放器样式设计——video.css
.videoContainer{
width: 600px;
height: 350px;
position: relative;
overflow: hidden;
background:#000;
color:#ccc;
}
video{
width: 600px;
height: 350px;
}
.caption{
display:none;
position: absolute;
top:;
left:;
width: 100%;
padding:10px;
color: #ccc;
font-size: 20px;
font-weight: bold;
box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
background:#1F1F1F;
background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
}
.control{
background:#333;
color: #ccc;
position: absolute;
bottom:;
left:;
width:100%;
z-index:;
display: none;
}
.topControl{
height: 11px;
border-bottom: 1px solid #404040;
padding:1px 5px;
background:#1F1F1F;
background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
}
.btmControl{
clear: both;
background:#1F1F1F;
background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
}
.control div.btn{
float: left;
width: 34px;
height: 30px;
padding: 0 5px;
border-right: 1px solid #404040;
cursor: pointer;
}
.control div.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width: 20px;
border:none;
color: #777;
}
/*暂停缓冲背景*/
.loading,#init{
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
background: url(../images/loading1.png) no-repeat 50% 50%;
z-index:;
display: none;
}
#init{
background: url(../images/play.png) no-repeat 50% 50% !important;
cursor: pointer;
}
/*控制栏暂停播放按钮*/
.control div.btnPlay{
background:url(../images/play.png) no-repeat 5px 0;
border-left: 1px solid #404040;
}
.control div.paused{
background:url(../images/stop.png) no-repeat 5px 0;
}
/*播放时间和进度控制条样式*/
.progress{
width:85%;
height: 10px;
position: relative;
float: left;
cursor: pointer;
background:#444;
background:-moz-linear-gradient(top,#666,#333);
background:-webkit-linear-gradient(top,#666,#333);
background:-o-linear-gradient(top,#666,#333);
box-shadow: 0 2px 3px #333 inset;
-moz-box-shadow: 0 2px 3px #333 inset;
-webkit-box-shadow: 0 2px 3px #333 inset;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.progress span{
height: 100%;
position: absolute;
top:;
left:;
display: block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.timeBar{
z-index:;
width:;
background:#3FB7FC;
background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
box-shadow: 0 0 1px #fff;
-moz-box-shadow: 0 0 1px #fff;
-webkit-box-shadow: 0 0 1px #fff;
}
.bufferBar{
z-index:;
width:;
background:#777;
background:-moz-linear-gradient(top,#999,#666);
background:-webkit-linear-gradient(top,#999,#666);
background:-o-linear-gradient(top,#999,#666);
box-shadow: 2px 0 5px #333;
-moz-box-shadow: 2px 0 5px #333;
-webkit-box-shadow: 2px 0 5px #333;
}
.time{
width:15%;
float:right;
text-align: center;
font-size: 11px;
line-height: 12px;
}
.control div.sound{
background:url(../images/volumeon.png) no-repeat 0px 0px;
border:none;
float: right;
}
.control div.sound2{
background:url(../images/volumeon.png) no-repeat 0px 0px !important;
}
.control div.muted{
background:url(../images/volumeoff.png) no-repeat 0px 0px !important;
}
.volume{
position: relative;
cursor:pointer;
width:70px;
height: 10px;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.volumeBar{
display: block;
height: 100%;
position: absolute;
top:;
left:;
background-color: #eee;
z-index:;
border-radius: 10px;
}
/*播放速率样式*/
.control div.btnStop{
background: url(../images/pause.png) no-repeat 0 0;
}
.control div.spdText{
border:none;
font-size: 14px;
line-height:30px;
font-style:italic;
}
.control div.selected{
font-size: 15px;
color: #ccc;
}
.control div.btnFS{
background: url(../images/fullScreen.png) no-repeat 0 0;
float: right;
} .control div.btnLight{
background: url(../images/lightoff.png) no-repeat 0 0;
border-left: 1px solid #404040;
float: right;
}
.control div.lighton{
background: url(../images/lighton.png) no-repeat 0 0 !important;
float: right;
}
3、监听控制的JS代码——video.js
$(document).ready(function(){
var video = $('#myVideo');
//关闭播放器默认的风格
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':-45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500); //监听onloademetadate事件
video.on('loadedmetadata',function(){
$('.caption').animate({'top':-45},300)
//初始化时间显示
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
//在视频显示区添加播放按钮
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function(){
$('.control').stop().animate({'bottom':0},500);
$('.caption').stop().animate({'top':0},500);
})
//$('#init').fadeIn(200);
}); //监听oncanplay事件
video.on('canplay',function(){
$('.loading').fadeOut(100);
}); //监听oncanplaythrough事件
var completeloaded = false;
video.on('canplaythrough',function(){
completeloaded = true;
}); //监听onended事件
video.on('ended',function(){
$('.btnPlay').removeClass("paused");
video[0].paused();
}); //监听onwaiting事件
video.on('waiting',function(){
$('.loading').fadeIn(200);
}); //时间转换函数
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
} //添加播放和暂停按钮
video.on('click',function(){
playpause();
})
$('.btnPlay').on('click',function(){
playpause();
})
var playpause = function() {
if (video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else{
video[0].pause();
$('.btnPlay').removeClass('paused'); }
} //监听ontimeupdate事件，动态显示播放时间和进度控制条。
video.on("timeupdate",function(){
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100*currentPos/maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
}); //显示缓冲进度
var startBuffer = function(){
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100*currentBuffer/maxduration;
$('.bufferBar').css('width',perc+'%');
if (currentBuffer<maxduration) {
setTimeout(startBuffer,500);
}
}; //显示播放进度，并监听onmousedown和onmouseup事件
var timeDrag = false;
$('.progress').on('mousedown',function(e){
timeDrag = true;
updatebar(e.pageX);
});
$('.progress').on('mouseup',function(e){
if (timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x){
var progress = $('.progress');
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100*position/progress.width();
if (percentage>100) {percentage = 100;};
if (percentage<0) {percentage = 0;};
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration*percentage/100;
}; //静音按钮
$('.sound').click(function(){
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if (video[0].muted) {
$('.volumeBar').css('width',0);
}else{
$('.volumeBar').css('width',video[0].volume*100+'%');
}
}); //音量调节滑动条
var volumeDrag = false;
$('.volume').on('mousedown',function(e){
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$('.volume').on('mouseup',function(e){
if (volumeDrag) {updateVolume(e.pageX);};
});
var updateVolume = function(x,vol){
var volume = $('.volume');
var percentage;
if (vol) {
percentage = vol*100;
}else{
var position = x - volume.offset().left;
percentage = 100*position/volume.width();
}
if (percentage>100) {percentage=100;};
if (percentage<0) {percentage=0;};
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage/100;
if (video[0].volume==0) {
$('.sound').removeClass('sound2').addClass('muted');
}else if (video[0].volume>0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
}; //播放速率选择按钮
$('.btnX1').on('click',function(){
fastfword(this,1);
});
$('.btnX3').on('click',function(){
fastfword(this,3);
});
var fastfword = function(obj,spd){
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//停止按钮
$('.btnStop').on('click',function(){
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//全屏按钮
$('.btnFS').on('click',function(){
if ($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}else{
alert('sorry,您的浏览器不支持全屏播放！');
}
})
//关灯按钮
$('.btnLight').click(function(){
$(this).toggleClass("lighton");
if (!$(this).hasClass('lighton')){
$('body').append('<div class="overlay"></div>');
$('.overlay').css(
{
'position':'absolute',
'width':100+"%",
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
})
$('.videoContainer').css(
{
'z-index':1000
})
}
else{
$('.overlay').remove();
}
})
})
4、在Google chrome 浏览器中显示如图：
因图标按钮是在网上剪切后调节尺寸所得，所以比较丑，但基本的功能还是有的！
参考书籍：HTML5+CSS3技术应用
