以下是 HTML5手机网页视频播放器代码 的示例演示效果:
部分效果截图:
HTML代码(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手机网页视频播放器代码</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/willesPlay.css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<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">Tara - 懂的那份感觉</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="关灯" 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="http://220.167.105.121/170/2/11/acloud/151672/letv.v.yinyuetai.com/he.yinyuetai.com/uploads/videos/common/6609014F06AE1C8E99DE142502A2B157.flv?crypt=95aa7f2e98550&b=1314&nlh=3072&nlt=45&bf=6000&p2p=1&video_type=flv&termid=0&tss=no&geo=CN-23-323-1&platid=0&splatid=0&its=0&qos=5&fcheck=0&proxy=3062324601,2101603530,3683272595&uid=3063271287.rp&keyitem=GOw_33YJAAbXYE-cnQwpfLlv_b2zAkYctFVqe5bsXQpaGNn3T1-vhw..&ntm=1447949400&nkey=55c24f4c47dd315085c383e07750f67e&nkey2=3344c026a5c147651522c75bc51fb700&sc=0e90a16b75f7bc55&br=3136&vid=782863&aid=1559&area=KR&vst=0&ptp=mv&rd=yinyuetai.com?sc=0e90a16b75f7bc55&errc=0&gn=1065&buss=106551&cips=182.149.207.119&lersrc=MTI1Ljg5Ljc0LjE3MQ==&tag=yinyuetai&cuhost=letv.v.yinyuetai.com&cuid=151672&flw3x=0&sign=coopdown&fext=.flv&br=3136&ptp=mv&rd=yinyuetai.com" type="video/mp4"></source>
当前浏览器不支持 video直接播放，点击这里下载视频：
<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>
</body>
</html>
JS代码(willesPlay.js):
$(function(){
var playVideo = $('video');
var playPause = $('.playPause');
//播放和暂停var currentTime = $('.timebar .currentTime');
//当前时间var duration = $('.timebar .duration');
//总时间var progress = $('.timebar .progress-bar');
//进度条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;
//Videovar positions = x - progress.offset().left;
//Click posvar percentage = 100 * positions / $('.timebar .progress').width();
//Check within rangeif (percentage > 100){
percentage = 100;
}
if (percentage < 0){
percentage = 0;
}
//Update progress bar and video currenttimeprogress.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();
}
}
//关灯$('.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();
}
);
}
);
//秒转时间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;
}
CSS代码(reset.css):
@charset "utf-8";/*@名称:base@功能:重设浏览器默认样式*/
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;color:#333;font-family:'Microsoft YaHei','微软雅黑',Arial,Lucida Grande,Tahoma,sans-serif;font-size:13px;}
/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{font:13px/1.5 tahoma,arial,\5b8b\4f53;}
input,select,textarea{font-size:100%;font-family:'Microsoft YaHei','微软雅黑',Arial,Lucida Grande,Tahoma,sans-serif;font-size:13px;}
/* 去掉各Table cell 的边距并让其边重合 */
table{/*border-collapse:collapse;*/
border-spacing:0;}
/* IE bug fixed:th 不继承 text-align*/
th{text-align:inherit;}
/* 去除默认边框 */
fieldset,img{border:0;}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{display:block;}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym{border:0;font-variant:normal;}
/* 一致的 del 样式 */
del{text-decoration:line-through;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;}
/* 去掉列表前的标识,li 会继承 */
ol,ul{list-style:none;}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th{text-align:left;}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
q:before,q:after{content:'';}
/* 统一上标和下标 */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
a{color:#333;}
/* 让链接在 hover 状态下显示下划线 */
a:hover{/*color:#c00;*/
}
/* 默认不显示下划线，保持页面简洁 */
ins,a{text-decoration:none;}
/* 清理浮动 */
.fn-clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.fn-clear{zoom:1;/* for IE6 IE7 */
}
/* 隐藏,通常用来与 JS 配合 */
body .fn-hide{display:none;}
/* 设置内联,减少浮动带来的bug */
.fn-left,.fn-right{display:inline;}
.fn-left{float:left;}
.fn-right{float:right;}
CSS代码(willesPlay.css):
@charset "utf-8";html,body{width:100%;height:100%;background:#ef6a6c;}
a:hover{text-decoration:none;}
#willesPlay{/*width:1000px;height:660px;*/
/*width:1024px;height:auto;*/
margin:100px auto;box-shadow:0px 0px 15px #333333;position:relative;}
/*播放器头部*/
#willesPlay .playHeader{width:100%;height:48px;background:url(../images/playheader.jpg) repeat-x;border-radius:3px 3px 0px 0px;}
#willesPlay .playHeader .videoName{font-size:16px;width:400px;height:48px;line-height:48px;text-align:center;margin:0 auto;color:#7a7f82;}
#willesPlay .playContent{position:relative;height:auto;overflow:hidden;background:#000;cursor:pointer;}
#willesPlay .playContent .turnoff{position:absolute;z-index:10;right:-40px;top:50%;margin-top:-90px;}
#willesPlay .playContent .turnoff li a{display:block;width:40px;height:40px;line-height:40px;margin-bottom:20px;text-align:center;font-size:20px;color:#fff;background:rgba(0,0,0,.5);}
#willesPlay .playContent .turnoff li a:hover{color:#666;}
#willesPlay .playContent .playTip{position:absolute;width:110px;height:110px;text-align:center;line-height:110px;top:50%;left:50%;margin-left:-55px;margin-top:-55px;background:#ef6a6c;font-size:60px;border:3px solid #FFFFFF;border-radius:50%;color:#fff;cursor:pointer;}
#willesPlay .playControll{position:absolute;z-index:2147483650;width:100%;height:48px;bottom:-48px;background:url(../images/playheader.jpg) repeat-x;border-radius:0px 0px 3px 3px;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
#willesPlay .fullControll{background:rgba(0,0,0,.5);}
#willesPlay .fullControll .timebar span{color:#FFFFFF;}
#willesPlay .playControll .playPause{float:left;width:20px;height:25px;background:url(../images/control_01.png) 0px 0px no-repeat;margin:11px 0px 0px 12px;cursor:pointer;}
#willesPlay .playControll .playIcon{background-position:0px -32px;}
/*进度条*/
#willesPlay .playControll .timebar{float:left;width:calc(100% - 145px);line-height:48px;overflow:hidden;margin:0 auto;margin:0px 0px 0px 20px;}
#willesPlay .playControll .timebar .progress{float:left;width:80%;margin:19px 5px;height:10px;cursor:pointer;}
#willesPlay .playControll .timebar span{float:left;width:8%;text-align:center;}
#willesPlay .otherControl{float:right;position:relative;}
#willesPlay .otherControl span{display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;vertical-align:middle;font-size:20px;margin:9px 7px;/*background:url(../images/control_01.png) no-repeat;*/
cursor:pointer;}
#willesPlay .otherControl span:nth-child(1){font-size:28px;color:#ef6a6c;}
/*#willesPlay .otherControl span:nth-child(2){background-position:-171px 0px;}
*/
#willesPlay .otherControl span:nth-child(2){color:#919597;}
/*音量*/
#willesPlay .otherControl .volumeBar{display:none;position:absolute;top:-110px;left:4px;width:26px;height:100px;background:#f1f2f2;border-radius:4px;cursor:pointer;}
#willesPlay .otherControl .volumeBar:after{content:"";display:block;position:absolute;bottom:-7px;left:5px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #f1f2f2;}
#willesPlay .otherControl .volumeBar .volumewrap{background:#a2a7aa;width:8px;height:80px;position:absolute;bottom:10px;left:9px;border-radius:4px;}
#willesPlay .otherControl .volumeBar .progress{background:none;}
#willesPlay .otherControl .volumeBar .progress-bar{position:absolute;bottom:0px;left:0px;border-radius:4px;}
video::-webkit-media-controls-enclosure{/*禁用播放器控制栏的样式*/
display:none !important;}
:-webkit-full-screen{}
分享到QQ
分享到微博
微信扫一扫
