HTML5 video视频播放器开发教程
日期：2018-03-11
来源：程序思维浏览：3003次
现在网上的播放器插件很多，但是依然无法满足我们的需求，比如在微信里使用、WebAPP里使用、混合式APP里使用都是问题，那么最好自己开发一个专属video视频播放器，下面我来给大家说一下开发视频播放器的思路以及图文教程。
先介绍一下所需要的js库：
1、zepto.js （相当于移动版的jQuery）
2、TweenMax (js动画库)
3、Hammer.js (触屏设备手势库)
4、hls.js (是Apple的动态码率自适应技术，用于播放m3u8格式的视频文件)
一、用html5+css3制作视频播放器的皮肤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,user-scaleable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="video-wrap" class="video-wrap">
<div id="video-screen" class="video-screen">
<video id="video" poster="./images/1.jpeg" src="video/2/1.m3u8" playsinline -webkit-playsinline ></video>
<div id="loading" class="loading hide"></div>
</div>
<div id="control" class="foot-pannel" data-show="1">
<div id="oper-btn" class="oper-btn play"></div>
<div class="drag-wrap">
<div id="progress-bar" class="drag-line">
<div id="drag-btn" class="drag-btn"></div>
<div id="play-progress-bar" class="drag-line-bg"></div>
</div>
<div class="video-time"><span id="current-time">00:00</span>/<span id="duration">00:00</span></div>
</div>
<div id="full-btn" class="full-btn"></div>
</div>
<div id="screen-time-wrap" class="screen-time-wrap hide">
<span id="screen-currenttime">00:00:00</span>/<span id="screen-duration">00:00:00</span>
</div>
</div>
</body>
<script src="js/zepto.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/function.js"></script>
<script src="js/videoplay.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/hls.min.js"></script>
<script>
var VP;
$(function(){
VP=new VideoPlay();
});
</script>
</html>
二、style.css样式代码
html,body{margin:0px;padding:0px;}
@media screen and (min-width:400px) {
html{font-size:21.3px;!important;}
}
@media screen and (min-width:414px) {
html{font-size:22.08px;!important;}
}
@media screen and (min-width:480px) {
html{font-size:25.6px;!important;}
}
.video-wrap{width:100%;height:10rem;position: relative;z-index:1;overflow:hidden;background:#000000;}
.video-wrap .video-screen{width:100%;height:100%;}
.video-wrap .video-screen .loading{width:2rem;height:2rem;position: absolute;z-index: 2147483648;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background-image:url("../images/load.gif");background-position:center;background-repeat:no-repeat;}
.video-wrap video{width:100%;height:100%;}
.video-wrap .foot-pannel{width:100%;height:2.5rem;background-color:rgba(0,0,0,0.7);position: absolute;z-index:2147483648;left:0px;bottom:0px;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content: center;align-items:center;-webkit-align-items:center;}
.video-wrap .foot-pannel .oper-btn{width:1.5rem;height:1.5rem;}
.video-wrap .foot-pannel .pause{background-image:url("../images/pause.png");background-size: 100%;background-repeat:no-repeat;background-position: center;}
.video-wrap .foot-pannel .play{background-image:url("../images/start.png");background-size: 100%;background-repeat:no-repeat;background-position: center;}
.video-wrap .foot-pannel .drag-wrap{width:80%;height:100%;position: relative;z-index:1;}
.video-wrap .foot-pannel .drag-wrap .drag-line{width:95%;height:0.2rem;background:#ffffff;margin:0 auto;margin-top:0.9rem;border-radius: 1rem;position: relative;z-index:1;}
.video-wrap .foot-pannel .drag-wrap .drag-line .drag-btn{width:1rem;height:1rem;background: #FF0000;position: absolute;z-index:1;left:0px;top:-0.3rem;border-radius: 100%;}
.video-wrap .foot-pannel .drag-wrap .drag-line .drag-line-bg{width:0px;height:100%;position: absolute;z-index:1;left:0px;top:0px;background:#FF0000;}
.video-wrap .foot-pannel .full-btn{width:2rem;height:2rem;background-image:url("../images/full.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
.video-wrap .foot-pannel .unfull-btn{width:2rem;height:2rem;background-image:url("../images/unfull.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
.video-wrap .foot-pannel .video-time{width:auto;height:auto;position: absolute;z-index:1;right:0px;bottom:0px;font-size:0.6rem;color:#FFFFFF;}
.video-wrap .screen-time-wrap{width:7rem;height:2.5rem;background-color:rgba(0,0,0,0.7);border-radius: 5px;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);font-size:0.7rem;color:#FFFFFF;text-align:center;line-height:2.5rem;}
.hide{display:none}
三、videoplay.js的代码
var VideoPlay=function(){
this.oOPerBtn=$("#oper-btn");
this.oVideo=$("#video");
this.oCurrentTime=$("#current-time");
this.oDuration=$("#duration");
this.oControl=$("#control");
this.oVideoScreen=$("#video-screen");
this.oDragBtn=$("#drag-btn");
this.oProgressBar=$("#progress-bar");
this.oPlayProgressBar=$("#play-progress-bar");
this.oScreenTimeWrap=$("#screen-time-wrap");
this.oScreenCurrentTime=$("#screen-currenttime");
this.oScreenDuration=$("#screen-duration");
this.oFullBtn=$("#full-btn");
this.oVideoWrap=$("#video-wrap");
this.oLoading=$("#loading");
this.iDuration=0;
this.iCurrentTime=0;
this.timer;
this.fnTimer;
this.oHls;
this.bMoving=false;
this.init();
};
VideoPlay.prototype={
init:function(){
var _this=this;
_this.bindEvent();
_this.eventVideo();
_this.hideControl(1);
_this.touchScreenTime();
_this.oHls=new Hls();
_this.oHls.loadSource(_this.oVideo.attr("src"));
_this.oHls.attachMedia(_this.oVideo[0]);
},
bindEvent:function(){
var _this=this;
_this.oOPerBtn.on("click",function(){//点击暂停、开始按钮
if($(this).hasClass("play")){
_this.pauseStyle();
}else{
_this.startStyle();
}
});
//点击屏幕
_this.oVideoScreen.on("touchstart",function(){
_this.showHideControl();
});
_this.setDragBtn();
//点击全屏
_this.oFullBtn.on("click",function(){
if($(this).hasClass("full-btn")){
_this.setFullScreen();
}else{
_this.setUnFullScreen();
}
});
//监听屏幕方向
$(window).on("orientationchange",function(){
_this.orientation();
});
},
orientation:function(){
var _this=this;
if(window.orientation==0 || window.orientation==180){//竖屏
_this.setUnFullScreen();
}else if(window.orientation==90 || window.orientation==-90){//横屏
_this.setFullScreen();
}
},
startStyle:function(){
var _this=this;
_this.oOPerBtn.removeClass("pause").addClass("play");
_this.oVideo[0].pause();
},
pauseStyle:function(){
var _this=this;
_this.oOPerBtn.removeClass("play").addClass("pause");
_this.oVideo[0].play();
},
getCurrentime:function(){
var _this=this;
_this.timer=setInterval(function(){
_this.iCurrentTime=_this.oVideo[0].currentTime;
_this.oCurrentTime.text(formatSeconds(_this.oVideo[0].currentTime));
_this.iDuration=_this.oVideo[0].duration;
setTimeout(function(){
_this.oDuration.text(formatSeconds(_this.iDuration));
},1000);
if(!_this.bMoving) {
_this.setProgress(_this.oVideo[0].currentTime);
}
},1000);
},
eventVideo:function(){
var _this=this;
//正在播放中
_this.oVideo[0].addEventListener("playing",function(){
_this.getCurrentime();
_this.oLoading.addClass("hide");
});
//播放
_this.oVideo[0].addEventListener("play",function(){
_this.oLoading.addClass("hide");
});
//监听等待
_this.oVideo[0].addEventListener("waiting",function(){
_this.oLoading.removeClass("hide");
});
//播放结束
_this.oVideo[0].addEventListener("ended",function(){
_this.startStyle();
_this.oLoading.addClass("hide");
});
},
showHideControl:function(){//显示隐藏底部控制面板
var _this=this;
clearTimeout(_this.fnTimer);
if(_this.oControl.attr("data-show")=='1'){
_this.hideControl(0);
}else{
_this.showControl();
}
},
hideControl:function(flag){
var _this=this;
if(flag==1){
_this.fnTimer=setTimeout(function(){
TweenMax.to(_this.oControl,0.3,{y:55,onComplete:function(){
_this.oControl.attr("data-show",'0');
}});
},5000);
}else{
TweenMax.to(_this.oControl,0.3,{y:55,onComplete:function(){
_this.oControl.attr("data-show",'0');
}});
}
},
showControl:function(){
var _this=this;
TweenMax.to(_this.oControl,0.3,{y:0,onComplete:function(){
_this.oControl.attr("data-show",'1');
_this.hideControl(1);
}});
},
setDragBtn:function(){//拖拽进度条
var _this=this,startX,moveX,bMove=false;
_this.oDragBtn.on("touchstart",function(e){
var touchPros= e.touches[0];
_this.bMoving=true;
if(!bMove) {
startX = touchPros.pageX - touchPros.target.parentNode.offsetLeft;
}
}).on("touchmove",function(e){
bMove=true;
_this.bMoving=true;
var touchPros= e.touches[0];
moveX=touchPros.pageX-startX;
if(moveX<=0){
moveX=0;
}else if(moveX>=_this.oProgressBar.width()-$(this).width()){
moveX=_this.oProgressBar.width()-$(this).width();
}
$(this).css("left",moveX+"px");
_this.oPlayProgressBar.width(moveX+"px");
}).on("touchend",function(){
_this.bMoving=false;
var fCurrentTime=moveX/(_this.oProgressBar.width()-$(this).width())*_this.iDuration;
_this.seekTo(fCurrentTime);
});
},
seekTo:function(pTime){
var _this=this;
_this.oVideo[0].currentTime=pTime;
},
setProgress:function(pTime){
var _this=this;
var iProgressWidth=pTime/_this.iDuration*(_this.oProgressBar.width()-_this.oDragBtn.width());
_this.oPlayProgressBar.width(iProgressWidth+"px");
_this.oDragBtn.css("left",iProgressWidth+"px");
},
touchScreenTime:function(){//触屏显示时间
var oHammer,_this=this,iCurrentTime= 0,iDirection=0;
oHammer=new Hammer(_this.oVideoScreen[0]);
oHammer.on("panstart",function(e){
iCurrentTime=_this.iCurrentTime;
});
oHammer.on("panmove",function(e){
iDirection= e.direction;
if(iDirection==2){//左
iCurrentTime--;
if(iCurrentTime<=0){
iCurrentTime=0;
}
_this.oScreenTimeWrap.removeClass("hide");
_this.setScreenTime(iCurrentTime);
}
if(iDirection==4){//右
iCurrentTime++;
if(iCurrentTime>=_this.iDuration){
iCurrentTime=_this.iDuration;
}
_this.oScreenTimeWrap.removeClass("hide");
_this.setScreenTime(iCurrentTime);
}
});
oHammer.on("panend",function(){
_this.seekTo(iCurrentTime);
_this.oScreenTimeWrap.addClass("hide");
});
},
setScreenTime:function(pTime){
var _this=this;
_this.oScreenCurrentTime.text(formatSeconds(pTime));
_this.oScreenDuration.text(formatSeconds(_this.iDuration));
},
setFullScreen:function(){//全屏
var _this=this;
var iWindowHeight;
setTimeout(function(){
_this.oFullBtn.removeClass("full-btn").addClass("unfull-btn");
iWindowHeight = $(window).height() + "px";
_this.oVideoWrap.css({"width":"100%","height":iWindowHeight,"position":"absolute","left":"0","top":"0","z-index":99});
},300);
},
setUnFullScreen:function(){//取消全屏
var _this=this;
_this.oFullBtn.removeClass("unfull-btn").addClass("full-btn");
_this.oVideoWrap.css({"width":"100%","height":"10rem","position":"relative","z-index":1});
}
};
四、function.js的代码转换时间戳
function formatSeconds(value) {
var theTime = parseInt(value);// 秒
var theTime1 = 0;// 分
var theTime2 = 0;// 小时
if(theTime > 60) {
theTime1 = parseInt(theTime/60);
theTime = parseInt(theTime%60);
if(theTime1 > 60) {
theTime2 = parseInt(theTime1/60);
theTime1 = parseInt(theTime1%60);
}
var result = ""+prefixInteger(parseInt(theTime),2)+"";
}else{
var result = "00:"+prefixInteger(parseInt(theTime),2)+"";
}
if(theTime1 > 0) {
result = ""+prefixInteger(parseInt(theTime1),2)+":"+result;
}
if(theTime2 > 0) {
result = ""+prefixInteger(parseInt(theTime2),2)+":"+result;
}
return result;
}
function prefixInteger(num, n) {
return (Array(n).join(0) + num).slice(-n);
}
好了已上就是video视频播放器的核心代码，可以支持移动端网站，微信网站，APP，PC端不支持，但是思路都是一样的，只是PC端的全屏模式有些特殊，PC端的解决方案，在《HTML5视频播放器video开发教程》里有详细的讲解。
先介绍一下所需要的js库：
1、zepto.js （相当于移动版的jQuery）
2、TweenMax (js动画库)
3、Hammer.js (触屏设备手势库)
4、hls.js (是Apple的动态码率自适应技术，用于播放m3u8格式的视频文件)
一、用html5+css3制作视频播放器的皮肤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,user-scaleable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="video-wrap" class="video-wrap">
<div id="video-screen" class="video-screen">
<video id="video" poster="./images/1.jpeg" src="video/2/1.m3u8" playsinline -webkit-playsinline ></video>
<div id="loading" class="loading hide"></div>
</div>
<div id="control" class="foot-pannel" data-show="1">
<div id="oper-btn" class="oper-btn play"></div>
<div class="drag-wrap">
<div id="progress-bar" class="drag-line">
<div id="drag-btn" class="drag-btn"></div>
<div id="play-progress-bar" class="drag-line-bg"></div>
</div>
<div class="video-time"><span id="current-time">00:00</span>/<span id="duration">00:00</span></div>
</div>
<div id="full-btn" class="full-btn"></div>
</div>
<div id="screen-time-wrap" class="screen-time-wrap hide">
<span id="screen-currenttime">00:00:00</span>/<span id="screen-duration">00:00:00</span>
</div>
</div>
</body>
<script src="js/zepto.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/function.js"></script>
<script src="js/videoplay.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/hls.min.js"></script>
<script>
var VP;
$(function(){
VP=new VideoPlay();
});
</script>
</html>
二、style.css样式代码
html,body{margin:0px;padding:0px;}
@media screen and (min-width:400px) {
html{font-size:21.3px;!important;}
}
@media screen and (min-width:414px) {
html{font-size:22.08px;!important;}
}
@media screen and (min-width:480px) {
html{font-size:25.6px;!important;}
}
.video-wrap{width:100%;height:10rem;position: relative;z-index:1;overflow:hidden;background:#000000;}
.video-wrap .video-screen{width:100%;height:100%;}
.video-wrap .video-screen .loading{width:2rem;height:2rem;position: absolute;z-index: 2147483648;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background-image:url("../images/load.gif");background-position:center;background-repeat:no-repeat;}
.video-wrap video{width:100%;height:100%;}
.video-wrap .foot-pannel{width:100%;height:2.5rem;background-color:rgba(0,0,0,0.7);position: absolute;z-index:2147483648;left:0px;bottom:0px;display:flex;display:-webkit-flex;justify-content: center;-webkit-justify-content: center;align-items:center;-webkit-align-items:center;}
.video-wrap .foot-pannel .oper-btn{width:1.5rem;height:1.5rem;}
.video-wrap .foot-pannel .pause{background-image:url("../images/pause.png");background-size: 100%;background-repeat:no-repeat;background-position: center;}
.video-wrap .foot-pannel .play{background-image:url("../images/start.png");background-size: 100%;background-repeat:no-repeat;background-position: center;}
.video-wrap .foot-pannel .drag-wrap{width:80%;height:100%;position: relative;z-index:1;}
.video-wrap .foot-pannel .drag-wrap .drag-line{width:95%;height:0.2rem;background:#ffffff;margin:0 auto;margin-top:0.9rem;border-radius: 1rem;position: relative;z-index:1;}
.video-wrap .foot-pannel .drag-wrap .drag-line .drag-btn{width:1rem;height:1rem;background: #FF0000;position: absolute;z-index:1;left:0px;top:-0.3rem;border-radius: 100%;}
.video-wrap .foot-pannel .drag-wrap .drag-line .drag-line-bg{width:0px;height:100%;position: absolute;z-index:1;left:0px;top:0px;background:#FF0000;}
.video-wrap .foot-pannel .full-btn{width:2rem;height:2rem;background-image:url("../images/full.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
.video-wrap .foot-pannel .unfull-btn{width:2rem;height:2rem;background-image:url("../images/unfull.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
.video-wrap .foot-pannel .video-time{width:auto;height:auto;position: absolute;z-index:1;right:0px;bottom:0px;font-size:0.6rem;color:#FFFFFF;}
.video-wrap .screen-time-wrap{width:7rem;height:2.5rem;background-color:rgba(0,0,0,0.7);border-radius: 5px;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);font-size:0.7rem;color:#FFFFFF;text-align:center;line-height:2.5rem;}
.hide{display:none}
三、videoplay.js的代码
var VideoPlay=function(){
this.oOPerBtn=$("#oper-btn");
this.oVideo=$("#video");
this.oCurrentTime=$("#current-time");
this.oDuration=$("#duration");
this.oControl=$("#control");
this.oVideoScreen=$("#video-screen");
this.oDragBtn=$("#drag-btn");
this.oProgressBar=$("#progress-bar");
this.oPlayProgressBar=$("#play-progress-bar");
this.oScreenTimeWrap=$("#screen-time-wrap");
this.oScreenCurrentTime=$("#screen-currenttime");
this.oScreenDuration=$("#screen-duration");
this.oFullBtn=$("#full-btn");
this.oVideoWrap=$("#video-wrap");
this.oLoading=$("#loading");
this.iDuration=0;
this.iCurrentTime=0;
this.timer;
this.fnTimer;
this.oHls;
this.bMoving=false;
this.init();
};
VideoPlay.prototype={
init:function(){
var _this=this;
_this.bindEvent();
_this.eventVideo();
_this.hideControl(1);
_this.touchScreenTime();
_this.oHls=new Hls();
_this.oHls.loadSource(_this.oVideo.attr("src"));
_this.oHls.attachMedia(_this.oVideo[0]);
},
bindEvent:function(){
var _this=this;
_this.oOPerBtn.on("click",function(){//点击暂停、开始按钮
if($(this).hasClass("play")){
_this.pauseStyle();
}else{
_this.startStyle();
}
});
//点击屏幕
_this.oVideoScreen.on("touchstart",function(){
_this.showHideControl();
});
_this.setDragBtn();
//点击全屏
_this.oFullBtn.on("click",function(){
if($(this).hasClass("full-btn")){
_this.setFullScreen();
}else{
_this.setUnFullScreen();
}
});
//监听屏幕方向
$(window).on("orientationchange",function(){
_this.orientation();
});
},
orientation:function(){
var _this=this;
if(window.orientation==0 || window.orientation==180){//竖屏
_this.setUnFullScreen();
}else if(window.orientation==90 || window.orientation==-90){//横屏
_this.setFullScreen();
}
},
startStyle:function(){
var _this=this;
_this.oOPerBtn.removeClass("pause").addClass("play");
_this.oVideo[0].pause();
},
pauseStyle:function(){
var _this=this;
_this.oOPerBtn.removeClass("play").addClass("pause");
_this.oVideo[0].play();
},
getCurrentime:function(){
var _this=this;
_this.timer=setInterval(function(){
_this.iCurrentTime=_this.oVideo[0].currentTime;
_this.oCurrentTime.text(formatSeconds(_this.oVideo[0].currentTime));
_this.iDuration=_this.oVideo[0].duration;
setTimeout(function(){
_this.oDuration.text(formatSeconds(_this.iDuration));
},1000);
if(!_this.bMoving) {
_this.setProgress(_this.oVideo[0].currentTime);
}
},1000);
},
eventVideo:function(){
var _this=this;
//正在播放中
_this.oVideo[0].addEventListener("playing",function(){
_this.getCurrentime();
_this.oLoading.addClass("hide");
});
//播放
_this.oVideo[0].addEventListener("play",function(){
_this.oLoading.addClass("hide");
});
//监听等待
_this.oVideo[0].addEventListener("waiting",function(){
_this.oLoading.removeClass("hide");
});
//播放结束
_this.oVideo[0].addEventListener("ended",function(){
_this.startStyle();
_this.oLoading.addClass("hide");
});
},
showHideControl:function(){//显示隐藏底部控制面板
var _this=this;
clearTimeout(_this.fnTimer);
if(_this.oControl.attr("data-show")=='1'){
_this.hideControl(0);
}else{
_this.showControl();
}
},
hideControl:function(flag){
var _this=this;
if(flag==1){
_this.fnTimer=setTimeout(function(){
TweenMax.to(_this.oControl,0.3,{y:55,onComplete:function(){
_this.oControl.attr("data-show",'0');
}});
},5000);
}else{
TweenMax.to(_this.oControl,0.3,{y:55,onComplete:function(){
_this.oControl.attr("data-show",'0');
}});
}
},
showControl:function(){
var _this=this;
TweenMax.to(_this.oControl,0.3,{y:0,onComplete:function(){
_this.oControl.attr("data-show",'1');
_this.hideControl(1);
}});
},
setDragBtn:function(){//拖拽进度条
var _this=this,startX,moveX,bMove=false;
_this.oDragBtn.on("touchstart",function(e){
var touchPros= e.touches[0];
_this.bMoving=true;
if(!bMove) {
startX = touchPros.pageX - touchPros.target.parentNode.offsetLeft;
}
}).on("touchmove",function(e){
bMove=true;
_this.bMoving=true;
var touchPros= e.touches[0];
moveX=touchPros.pageX-startX;
if(moveX<=0){
moveX=0;
}else if(moveX>=_this.oProgressBar.width()-$(this).width()){
moveX=_this.oProgressBar.width()-$(this).width();
}
$(this).css("left",moveX+"px");
_this.oPlayProgressBar.width(moveX+"px");
}).on("touchend",function(){
_this.bMoving=false;
var fCurrentTime=moveX/(_this.oProgressBar.width()-$(this).width())*_this.iDuration;
_this.seekTo(fCurrentTime);
});
},
seekTo:function(pTime){
var _this=this;
_this.oVideo[0].currentTime=pTime;
},
setProgress:function(pTime){
var _this=this;
var iProgressWidth=pTime/_this.iDuration*(_this.oProgressBar.width()-_this.oDragBtn.width());
_this.oPlayProgressBar.width(iProgressWidth+"px");
_this.oDragBtn.css("left",iProgressWidth+"px");
},
touchScreenTime:function(){//触屏显示时间
var oHammer,_this=this,iCurrentTime= 0,iDirection=0;
oHammer=new Hammer(_this.oVideoScreen[0]);
oHammer.on("panstart",function(e){
iCurrentTime=_this.iCurrentTime;
});
oHammer.on("panmove",function(e){
iDirection= e.direction;
if(iDirection==2){//左
iCurrentTime--;
if(iCurrentTime<=0){
iCurrentTime=0;
}
_this.oScreenTimeWrap.removeClass("hide");
_this.setScreenTime(iCurrentTime);
}
if(iDirection==4){//右
iCurrentTime++;
if(iCurrentTime>=_this.iDuration){
iCurrentTime=_this.iDuration;
}
_this.oScreenTimeWrap.removeClass("hide");
_this.setScreenTime(iCurrentTime);
}
});
oHammer.on("panend",function(){
_this.seekTo(iCurrentTime);
_this.oScreenTimeWrap.addClass("hide");
});
},
setScreenTime:function(pTime){
var _this=this;
_this.oScreenCurrentTime.text(formatSeconds(pTime));
_this.oScreenDuration.text(formatSeconds(_this.iDuration));
},
setFullScreen:function(){//全屏
var _this=this;
var iWindowHeight;
setTimeout(function(){
_this.oFullBtn.removeClass("full-btn").addClass("unfull-btn");
iWindowHeight = $(window).height() + "px";
_this.oVideoWrap.css({"width":"100%","height":iWindowHeight,"position":"absolute","left":"0","top":"0","z-index":99});
},300);
},
setUnFullScreen:function(){//取消全屏
var _this=this;
_this.oFullBtn.removeClass("unfull-btn").addClass("full-btn");
_this.oVideoWrap.css({"width":"100%","height":"10rem","position":"relative","z-index":1});
}
};
四、function.js的代码转换时间戳
function formatSeconds(value) {
var theTime = parseInt(value);// 秒
var theTime1 = 0;// 分
var theTime2 = 0;// 小时
if(theTime > 60) {
theTime1 = parseInt(theTime/60);
theTime = parseInt(theTime%60);
if(theTime1 > 60) {
theTime2 = parseInt(theTime1/60);
theTime1 = parseInt(theTime1%60);
}
var result = ""+prefixInteger(parseInt(theTime),2)+"";
}else{
var result = "00:"+prefixInteger(parseInt(theTime),2)+"";
}
if(theTime1 > 0) {
result = ""+prefixInteger(parseInt(theTime1),2)+":"+result;
}
if(theTime2 > 0) {
result = ""+prefixInteger(parseInt(theTime2),2)+":"+result;
}
return result;
}
function prefixInteger(num, n) {
return (Array(n).join(0) + num).slice(-n);
}
好了已上就是video视频播放器的核心代码，可以支持移动端网站，微信网站，APP，PC端不支持，但是思路都是一样的，只是PC端的全屏模式有些特殊，PC端的解决方案，在《HTML5视频播放器video开发教程》里有详细的讲解。
精品好课
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...