H5外包团队:使用HTML5播放短视频代码分享

滑动代码

 /**
      * 滑动处理
      */
     function Touch() {
         this.init();
     }
     Touch.fn = Touch.prototype;
     Touch.fn.init = function (params) {
         var self = this;
         dataStore.lastY = dataStore.translateY;//记录当前位移
         self.startY = 0;
         self.moveY = 0;
         // self.lock = 0;//如果在回调或上升阶段不允许滑动.
         self.bodyHeight = window.innerHeight;
         self.resetLimitY();
         self.isIOS = /ip(?:hone|ad|od)/.test(navigator.userAgent.toLowerCase());
         ['touchstart','touchmove','touchend'].forEach(function (str) {
             document.addEventListener(str,self[str].bind(self));
         });
     }
     Touch.fn.touchstart = function(e){
         var self = this;
         if(dataStore.lock) return;
         self.startY = e.touches[0].pageY;
         self.start = Date.now();//标识滑动起始时间，也用于标识滑动start
     }
     Touch.fn.move = function (y) {
         dataStore.translateY = y;
     }
     Touch.fn.touchmove = function(e){
         var self = this;
         if(dataStore.lock||!self.start) return;//锁定了，或者没有start，主要是手势一直滑动情况，已经加速度划走了，手势需要松开再重新开始
         self.moveY = e.touches[0].pageY - self.startY;
         self.move(self.moveY+ dataStore.lastY);
         self.detect();
     }
     Touch.fn.detect = function(isEnd){
         var self = this;
         // console.log(self.moveY+"  "+(Date.now()-self.start));
         var a = Math.abs(self.moveY)/(Date.now()-self.start)>=0.5;
         if(isEnd){
             if(a){
                 self.limitY = 0;
             }
             self.movend();
             return;
         }
         if(self.isIOS&&a){//IOS，可以在touchmove时直接滑动，体验流畅。
             self.limitY = 0;
             self.movend();
         }

     }
     Touch.fn.resetLimitY = function () {
         this.limitY = this.bodyHeight/3;//位移多少才下滑
     }
     Touch.fn.touchend = function (e) {
         var self = this;
         if(dataStore.lock||self.moveY==0||!self.start) return;
         self.detect(1);
     }
     Touch.fn.movend = function () {
         // if(dataStore.lock) return;
         // dataStore.lock = 1;
         var self = this;
         /***
          * 最后上下位移小于最小值则还原为上一次位移，
          * 否则，那么就需要上移或下移一个body宽度，上移则translate加，下移在减去一个body
          * 这里是计算出了应该位移高度。
          */
         var transformY = Math.abs(self.moveY)<self.limitY?dataStore.lastY:dataStore.lastY+self.bodyHeight*(self.moveY>0?1:-1);

         /***
          * 还需计算最大下滑高度和最大上滑高度
          */
         var listUL = document.querySelector(".quan_vcd_list");
         var listHeight = listUL.getBoundingClientRect().height;

         //如果是最后一个li，则不能下滑，
         var maxBottom = (listHeight - self.bodyHeight)*-1;
         var lastComputeY = transformY>0?0:transformY<maxBottom?maxBottom:transformY;
         //停止滑动之后，自动滚动距离，transition
         listUL.classList.add('trans');

         if(lastComputeY<=0){
             var d = lastComputeY-dataStore.lastY;
             d&&events.trigger("touch_move",d,(-lastComputeY/self.bodyHeight));
         }
         self.start = 0;
         var raf = window.requestAnimationFrame|| window.webkitRequestAnimationFrame;
         raf(function () {
             self.move(lastComputeY);
             self.moveY = 0;
             dataStore.lastY = lastComputeY;//记录确定的位置
             if(listHeight+dataStore.lastY<=self.bodyHeight){
                 events.trigger("turnPage");
             }
             setTimeout(function () {
                 listUL.classList.remove("trans");
                 dataStore.lock = 0;
                 self.resetLimitY();
             },500);
         });
     }

 exports.init = function (opt) {
         var config = {
             props:['feedData','index'],
             data:function () {
                 return {
                     play_btn:0,
                     bg_name:"",
                     anim_like:[],
                     vloading:0
                 }
             },
             mounted:function(){
                 addEvent(this);
                 this.stall = 0;
                 this.loaderror = 0;
             },
             methods:{
                 playBtn:function(){
                     this.play();
                 },
                 onerror:function(){
                     errors(this,"error:");
                 },
                 onbort:function(){
                     errors(this,"bort:");
                 },
                 onstalled:function () {
                     var self = this;
                     if(!self.feedData.start) return;
                     self.vloading = 1;
                     self.play();
                     self.stall++;
                     if(self.stall==2){
                         util.showTip("网络有点慢哦~");
                         store.report(27,1);
                     }
                 },
                 onplaying:function(){
                     var self = this;
                     compute(self);
                     self.play_btn = 0;
                     self.wa("138146.34.1");
                     store.report(27,0);
                 },
                 onpause:function(){
                     setPlay(this,1);
                 },
                 waiting:function () {
                     var self = this;
                     clearInterval(self.timer);
                     self.loadTimes = 0;
                     self.timer = setInterval(function () {
                         self.loadTimes++;
                         if (self.loadTimes >= 2) {//连续3次未播放，当作是卡住了
                             self.aPause();
                             self.vloading = 1;
                         }
                     }, 1800);
                 },
                 ondurationchange:function(){
                     compute(this);
                 },
                 onloadedmetadata:function(){
                     compute(this);
                 },
                 ontimeupdate:function(){
                     timeupdate(this);
                 },
                 aPause:function(){
                     var self = this;
                     self.audio&&self.audio.pause();
                 },
                 aPlay:function(){
                     var self = this;
                     self.audio&&self.audio.play();
                 },
                 pause:function(){
                     var self= this;
                     self.video.pause();
                     self.aPause();
                     self.vloading = 0;
                     clearInterval(self.timer);
                 },
                 play:function(isMove){
                     videoPlay(this,isMove);
                 },
                 checkLoading:function(){
                     checkLoading(this);
                 },
                 show_ani:function (e) {
                     showAni(this,e);
                 },
                 click_pause:function (e) {
                     clickPause(this,e);
                 },
                 onx5videoexitfullscreen:function (params) {
                     this.video.play();
                 },
                 hideAll:function () {
                     console.log("hideAll");
                 }

             }
         };
         Vue.component('video-com',util.assign(config,opt));
     }
     /**
      * 视频暂停
      * @param {*} self
      */
     function clickPause(self,e) {
         var feed = self.feedData;
         if(feed.goods_show){
             feed.goods_show = 0;
             feed.hideOpt = 0;
             return;
         }
         if(feed.input_show==0&&feed.comments_show){
             feed.hideOpt = 0;
             feed.comments_show = 0;
             return;
         }
         if(feed.input_show){//评论的时候，不允许操作。
             return;
         }
         if(self.dt>0){
             self.show_ani(e);
             return;
         }
         self.dt = setTimeout(function () {
             self.dt = 0;
         },400);

         if(self.t||Date.now-self.dbclick<){//dbclick之后，1.5秒不响应点击播放暂停
             return;
         }
         self.t = setTimeout(function () {
             self.t = 0;
             if(self.play_btn){
                 self.play();
             }else{
                 self.pause();
             }
         },600);
     }
     /**
      * 双击视频动画
      * @param {*} self
      */
     function showAni(self,e) {
         clearTimeout(self.t);
         self.t = 0;
         clearTimeout(self.dt);
         self.dt = 0;
         self.dbclick = Date.now();
         var feed = self.feedData;
         if(!(feed.commentid>0)&&!self.praising){
             self.praising = 1;
             store.add_praise(feed,function () {
                 self.praising = 0;
             },detailUtil.getOnePic(feed));
         }
         var like = self.anim_like;
         var len = like.length;
         if(len>=8){
             like.splice(0,len-5);
         }
         like.push({x:e.pageX-100,y:height*this.index+e.pageY - 100});
     }
     /**
      * 检测下载是否完成
      * @param {*} self
      */
     function checkLoading(self) {
         var interval = window.setInterval(getLoaded,100);
         // 获取视频已经下载的时长
         function getLoaded() {
             var end = 0;
             try {
                 end = parseInt(self.video.buffered.end(0) || 0)+2;
             } catch(e) {
             }
             if(end>=self.duration){
                 clearInterval(interval);
                 self.loadedAll = 1;
                 var nextItem = store.store.feedList[self.index+1];
                 if(nextItem){//存在下一条
                     //没有播放视频，既还没有加载完成。
                     if(!nextItem.playurl) nextItem.playurl = nextItem.videourl;
                     //有背景音乐，但是播放的背景音乐未加载完成，则开始加载
                     if(!nextItem.bgmurl_p&&nextItem.bgmurl){
                         nextItem.bgmurl_p = nextItem.bgmurl;
                     }
                 }

             }
             return end
         }
     }
     /**
      * 播放视频
      * @param {*} self
      */
     function videoPlay(self,isMove) {
         self.play_btn = 0;

         self.aPlay();

         isMove&&(self.video.currentTime = 0);
         if(self.audio){
             self.video.volume = 0;
             self.video.muted =1;
         }
         var feed = self.feedData;
         if(!feed.playurl){
             feed.playurl = feed.videourl;
             self.video.load();
         }
         self.video.play();
         isMove&&setTimeout(function (paras) {

             if(isIOS&&!feed.start&&window.isXCX==1){
                 self.play_btn = 1;
                 clearInterval(self.timer);
             }else if(!feed.start){
                 setTimeout(function () {
                     if(feed.start) return;
                     setPlay(self,1);
                     clearInterval(self.timer);
                 },2000);
             }
         },1000);
         self.waiting();
     }
     /**
      * 播放中处理
      * @param {*} self
      */
     function timeupdate(self) {
         var ct = self.video.currentTime;
         if(!self.duration) return;
         self.feedData.play_time = ct*100/self.duration;//设置到住storage
         // console.log("timeupdate");
         self.loadTimes>=2&&self.aPlay();
         var feed = self.feedData;
         if(!feed.start&&ct>0){
             feed.hide = 0;//video is hide or show
             feed.start = 1;//video is start ，should hide poster
         }
         self.vloading = 0;
         self.play_btn = 0;
         self.loadTimes = 0;
         self.loaderror = 0;
         if(!self.move&&ct+1>=self.duration/2){
             self.feedData.goodsMove = 1;
             self.move = 1;
         }
         if(Math.round(ct)%3==0){
             self.wa("138146.35.1");
         }
         if(!self.waDone&&Math.ceil(ct+1)>=self.duration){
             self.wa("138146.9.1");
             self.waDone = 1;
         }
     }
     /**
      * 处理视频和背景音乐
      * @param {*} self
      */
     function addEvent(self) {
         self.$nextTick(function () {
             self.video = self.$el.querySelector("video");
             var arry = ['stalled','playing', 'timeupdate', 'abort', 'error','durationchange','loadedmetadata','pause','x5videoexitfullscreen'];
             arry.forEach(function (str) {
                 self.video.addEventListener(str,self['on'+str]);
             });
             if(self.index==0){
                 loadWX(function (env) {
                     if(env&&isAndroid) return;
                     self.play();
                 });
             }
         });
         var feed = self.feedData;
         handleBGM(feed,self);

         events.listen("touch_move",function (direct,i) {
             handleMove(self,feed,direct,i);
         });
     }
     /**
      * 处理滑动播放
      * @param {*} self
      * @param {*} feed
      * @param {*} direct
      * @param {*} i
      */
     function handleMove(self,feed,direct,i) {
         if(i==self.index){
             detailUtil.setShare(self.feedData);
             if(!feed.playurl){
                 feed.playurl = feed.videourl;
                 if(!feed.bgmurl_p&&feed.bgmurl){
                     feed.bgmurl_p = feed.bgmurl;
                     self.audio.load();
                 }
                 self.video.load();
             }
             self.$nextTick(function () {
                 store.addPlayNum(feed.shareid);
                 if(self.audio&&!self.audioLoaded){
                     var int = setInterval(function () {
                         if(self.audioLoaded){
                             clearInterval(int);
                             self.play(1);
                         }
                     },100);
                 }else{
                     self.play(1);
                 }
             });
         }
         //direct>0 则是下滑,页面出现上一个视频，则当前位置的下一个视频要暂停，
         //direct<则是上滑，页面要播放下一个视频了，则当前位置的上一个视频要暂停
         if(self.index == i+(direct>0?1:-1)){
             self.pause();
             if(!self.loadedAll){
                 feed.playurl = "";//如果是未加载完成，那么就不要加载了。
                 feed.start = 0;
                 feed.hide = 1;
             }
             if(!self.audioLoaded){
                 feed.bgmurl_p = "";
             }
         }
         if(self.index>=i+7||self.index<=i-7){
             feed.maxHide = 1;//最大超过16个节点，则隐藏。
             feed.playurl = "";//最大超过16个节点，则把其他视频干掉。
             feed.start = 0;
             feed.hide = 1;
         }else{
             feed.maxHide = 0;
         }
     }
     function loadWX(cb) {
         if(device.scene=="weixin"){
             if(window.WeixinJSBridge){
                 cb(1);
             }else{
                 document.addEventListener("WeixinJSBridgeReady", function() {
                     cb(1);
                 });
             }
         }else{
             cb();
         }
     }
     /**
      * 处理背景
      * @param {*} feed
      * @param {*} self
      */
     function handleBGM(feed,self) {
         //背景音乐
         var bgm=feed.bgm;
         if(bgm&&window.bgmlist&&bgmlist[bgm]){
             self.bg_name = bgmlist[bgm].bgmname;
             feed.bgmurl = bgm+".mp3";
             if(self.index==0){
                 feed.bgmurl_p = feed.bgmurl;
             }
             self.audio = self.$el.querySelector("audio");
             setPlay(self,0);
             var t = setTimeout(function () {//超时处理
                 done();
             },4000);
             loadWX(throuth);
             function throuth(){
                 self.audio.addEventListener("canplaythrough",function () {
                     done();
                 });
             }
             function done(){
                 clearTimeout(t);
                 self.vloading = 0;
                 self.audioLoaded = 1;
                 !feed.start&&(setPlay(self,1));//还没播放，则吧播放按钮弹出来
             }

         }else{
             setPlay(self,1);
         }
     }
     function compute(self) {
         if(self.isCd) return;
         var d = self.video.duration;
         if (d>0) {
             self.isCd = true;
             self.duration = d;
             self.checkLoading();
         }
     }
     function setPlay(self,f){
         self.play_btn = f;
         self.vloading = !f;
     }
     function errors(self,msg) {
         if(!self.video||!self.feedData.start) return;
         self.loaderror++;
         if(self.loaderror<=2){
             self.play();
             return;
         }
         setPlay(self,1);
         msg += JSON.stringify(self.video.error)+","+self.video.src;
         store.report(26,0,msg);
     }

有H5项目需求欢迎联系我们 我们提供免费的项目评估报价

QQ：372900288

WX：Liuxiang0884