一.首先先看一下目錄
css框架用的是bootstrap，js庫用的是jquery
目錄.png
bootstrap
----|css
-------|bootstrap.css
----|fonts
-------|glyphicons-halflings-regular.eot
-------|glyphicons-halflings-regular.svg
-------|glyphicons-halflings-regular.ttf
-------|glyphicons-halflings-regular.woff
-------|glyphicons-halflings-regular.woff2
css
----|reset.css
----|willesPlay.css
images
----|control_01.png
----|playheader.jpg
js
----|jquery-1.11.3.min.js
----|willesPlay.js
二.先看一下index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>超炫酷的HTML5視頻播放器DEMO演示</title>
<!--引用背景的css樣式reset.css-->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<!--引用bootstrap框架(css)-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--引用播放器的樣式willesPlay.css-->
<link rel="stylesheet" type="text/css" href="css/willesPlay.css"/>
<!--引用jquery框架-->
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--引用視頻的播放的js-->
<script src="js/willesPlay.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="willesPlay">
<div class="playHeader">
<div class="videoName">艾歐尼亞之血色月光</div>
</div>
<div class="playContent">
<div class="turnoff">
<ul>
<li><a href="javascript:;" title="喜歡" class="glyphicon glyphicon-heart-empty"></a></li>
<li><a href="javascript:;" title="關(guān)燈" class="btnLight on glyphicon glyphicon-sunglasses"></a></li>
<li><a href="javascript:;" title="分享" class="glyphicon glyphicon-share"></a></li>
</ul>
</div>
<video width="100%" height="100%" id="playVideo">
<source src="0001.mp4" type="video/mp4"></source>
當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻： <a href="/">下載視頻</a>
</video>
<div class="playTip glyphicon glyphicon-play"></div>
</div>
<div class="playControll">
<div class="playPause playIcon"></div>
<div class="timebar">
<span class="currentTime">0:00:00</span>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<span class="duration">0:00:00</span>
</div>
<div class="otherControl">
<span class="volume glyphicon glyphicon-volume-down"></span>
<span class="fullScreen glyphicon glyphicon-fullscreen"></span>
<div class="volumeBar">
<div class="volumewrap">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 40%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
三.再看一下播放器的js
$(function() {
var playVideo = $('video');
var playPause = $('.playPause'); //播放和暫停
var currentTime = $('.timebar .currentTime'); //當(dāng)前時(shí)間
var duration = $('.timebar .duration'); //總時(shí)間
var progress = $('.timebar .progress-bar'); //進(jìn)度條
var volumebar = $('.volumeBar .volumewrap').find('.progress-bar');
playVideo[0].volume = 0.4; //初始化音量
playPause.on('click', function() {
playControl();
});
$('.playContent').on('click', function() {
playControl();
}).hover(function() {
$('.turnoff').stop().animate({
'right': 0
}, 500);
}, function() {
$('.turnoff').stop().animate({
'right': -40
}, 500);
});
$(document).click(function() {
$('.volumeBar').hide();
});
playVideo.on('loadedmetadata', function() {
duration.text(formatSeconds(playVideo[0].duration));
});
playVideo.on('timeupdate', function() {
currentTime.text(formatSeconds(playVideo[0].currentTime));
progress.css('width', 100 * playVideo[0].currentTime / playVideo[0].duration + '%');
});
playVideo.on('ended', function() {
$('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
playPause.toggleClass('playIcon');
});
$(window).keyup(function(event){
event = event || window.event;
if(event.keyCode == 32)playControl();
if(event.keyCode == 27){
$('.fullScreen').removeClass('cancleScreen');
$('#willesPlay .playControll').css({
'bottom': -48
}).removeClass('fullControll');
};
event.preventDefault();
});
//全屏
$('.fullScreen').on('click', function() {
if ($(this).hasClass('cancleScreen')) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
$(this).removeClass('cancleScreen');
$('#willesPlay .playControll').css({
'bottom': -48
}).removeClass('fullControll');
} else {
if (playVideo[0].requestFullscreen) {
playVideo[0].requestFullscreen();
} else if (playVideo[0].mozRequestFullScreen) {
playVideo[0].mozRequestFullScreen();
} else if (playVideo[0].webkitRequestFullscreen) {
playVideo[0].webkitRequestFullscreen();
} else if (playVideo[0].msRequestFullscreen) {
playVideo[0].msRequestFullscreen();
}
$(this).addClass('cancleScreen');
$('#willesPlay .playControll').css({
'left': 0,
'bottom': 0
}).addClass('fullControll');
}
return false;
});
//音量
$('.volume').on('click', function(e) {
e = e || window.event;
$('.volumeBar').toggle();
e.stopPropagation();
});
$('.volumeBar').on('click mousewheel DOMMouseScroll', function(e) {
e = e || window.event;
volumeControl(e);
e.stopPropagation();
return false;
});
$('.timebar .progress').mousedown(function(e) {
e = e || window.event;
updatebar(e.pageX);
});
//$('.playContent').on('mousewheel DOMMouseScroll',function(e){
// volumeControl(e);
//});
var updatebar = function(x) {
var maxduration = playVideo[0].duration; //Video
var positions = x - progress.offset().left; //Click pos
var percentage = 100 * positions / $('.timebar .progress').width();
//Check within range
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
progress.css('width', percentage + '%');
playVideo[0].currentTime = maxduration * percentage / 100;
};
//音量控制
function volumeControl(e) {
e = e || window.event;
var eventype = e.type;
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
var positions = 0;
var percentage = 0;
if (eventype == "click") {
positions = volumebar.offset().top - e.pageY;
percentage = 100 * (positions + volumebar.height()) / $('.volumeBar .volumewrap').height();
} else if (eventype == "mousewheel" || eventype == "DOMMouseScroll") {
percentage = 100 * (volumebar.height() + delta) / $('.volumeBar .volumewrap').height();
}
if (percentage < 0) {
percentage = 0;
$('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-off');
}
if (percentage > 50) {
$('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-up');
}
if (percentage > 0 && percentage <= 50) {
$('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-down');
}
if (percentage >= 100) {
percentage = 100;
}
$('.volumewrap .progress-bar').css('height', percentage + '%');
playVideo[0].volume = percentage / 100;
e.stopPropagation();
e.preventDefault();
}
function playControl() {
playPause.toggleClass('playIcon');
if (playVideo[0].paused) {
playVideo[0].play();
$('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut();
} else {
playVideo[0].pause();
$('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
}
}
//關(guān)燈
$('.btnLight').click(function(e) {
e = e || window.event;
if ($(this).hasClass('on')) {
$(this).removeClass('on');
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position': 'absolute',
'width': 100 + '%',
'height': $(document).height(),
'background': '#000',
'opacity': 1,
'top': 0,
'left': 0,
'z-index': 999
});
$('.playContent').css({
'z-index': 1000
});
$('.playControll').css({
'bottom': -48,
'z-index': 1000
});
$('.playContent').hover(function() {
$('.playControll').stop().animate({
'height': 48,
},500);
}, function() {
setTimeout(function() {
$('.playControll').stop().animate({
'height': 0,
}, 500);
}, 2000)
});
} else {
$(this).addClass('on');
$('.overlay').remove();
$('.playControll').css({
'bottom': 0,
});
}
e.stopPropagation();
e.preventDefault();
});
});
//秒轉(zhuǎn)時(shí)間
function formatSeconds(value) {
value = parseInt(value);
var time;
if (value > -1) {
hour = Math.floor(value / 3600);
min = Math.floor(value / 60) % 60;
sec = value % 60;
day = parseInt(hour / 24);
if (day > 0) {
hour = hour - 24 * day;
time = day + "day " + hour + ":";
} else time = hour + ":";
if (min < 10) {
time += "0";
}
time += min + ":";
if (sec < 10) {
time += "0";
}
time += sec;
}
return time;
}
最終效果就是：
阿卡麗和易大師對決1.png
阿卡麗和易大師對決2.png
