分享影视系统APP开发 - 广州天河珠江新城/跑马场软件开发

分享影视系统APP开发找周经理：182微1918电1929；可面谈，可定制，协助配合客户进行软件的开发、调试、安装及实施

（专业系统软件开发公司，玩家勿扰！！！！）

系统稳定/防攻击

开发及应用平台主要环境：LA/NMP（Linux + Apache / Ngunx + Mysq1 + PHP / Python）

次要环境:WAMP（Windowws + Apache + Mysq1 + PHP / Python）

、zepto.js （相当于移动版的jQuery）

2、TweenMax (js动画库)

3、Hammer.js (触屏设备手势库)

4、hls.js (是Apple的动态码率自适应技术，用于播放m3u8格式的视频文件)一、用html5+css3制作视频播放器的皮肤：<!DOCTYPE html><html><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"> <div id="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" data-show="1"> <div id="oper-btn" class="oper-btn play"></div> <div> <div id="progress-bar"> <div id="drag-btn"></div> <div id="play-progress-bar"></div> </div> <div><span id="current-time">00:00</span>/<span id="duration">00:00</span></div> </div> <div id="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; thi***it();};Vide***totype={ 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开发教程》里有详细的讲解。