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

滑动代码

  1 /**
  2      * 滑动处理
  3      */
  4     function Touch() {
  5         this.init();
  6     }
  7     Touch.fn = Touch.prototype;
  8     Touch.fn.init = function (params) {
  9         var self = this;
 10         dataStore.lastY = dataStore.translateY;//记录当前位移
 11         self.startY = 0;
 12         self.moveY = 0;
 13         // self.lock = 0;//如果在回调或上升阶段不允许滑动.
 14         self.bodyHeight = window.innerHeight;
 15         self.resetLimitY();
 16         self.isIOS = /ip(?:hone|ad|od)/.test(navigator.userAgent.toLowerCase());
 17         ['touchstart','touchmove','touchend'].forEach(function (str) {
 18             document.addEventListener(str,self[str].bind(self));
 19         });
 20     }
 21     Touch.fn.touchstart = function(e){
 22         var self = this;
 23         if(dataStore.lock) return;
 24         self.startY = e.touches[0].pageY;
 25         self.start = Date.now();//标识滑动起始时间，也用于标识滑动start
 26     }
 27     Touch.fn.move = function (y) {
 28         dataStore.translateY = y;
 29     }
 30     Touch.fn.touchmove = function(e){
 31         var self = this;
 32         if(dataStore.lock||!self.start) return;//锁定了，或者没有start，主要是手势一直滑动情况，已经加速度划走了，手势需要松开再重新开始
 33         self.moveY = e.touches[0].pageY - self.startY;
 34         self.move(self.moveY+ dataStore.lastY);   
 35         self.detect();     
 36     }
 37     Touch.fn.detect = function(isEnd){
 38         var self = this;
 39         // console.log(self.moveY+"  "+(Date.now()-self.start));
 40         var a = Math.abs(self.moveY)/(Date.now()-self.start)>=0.5;
 41         if(isEnd){
 42             if(a){
 43                 self.limitY = 0;
 44             }
 45             self.movend();
 46             return;
 47         }
 48         if(self.isIOS&&a){//IOS，可以在touchmove时直接滑动，体验流畅。
 49             self.limitY = 0;
 50             self.movend();
 51         }
 52         
 53     }
 54     Touch.fn.resetLimitY = function () {
 55         this.limitY = this.bodyHeight/3;//位移多少才下滑
 56     }
 57     Touch.fn.touchend = function (e) {
 58         var self = this;
 59         if(dataStore.lock||self.moveY==0||!self.start) return;
 60         self.detect(1);     
 61     }
 62     Touch.fn.movend = function () {
 63         // if(dataStore.lock) return;
 64         // dataStore.lock = 1;
 65         var self = this;
 66         /***
 67          * 最后上下位移小于最小值则还原为上一次位移，
 68          * 否则，那么就需要上移或下移一个body宽度，上移则translate加，下移在减去一个body
 69          * 这里是计算出了应该位移高度。
 70          */
 71         var transformY = Math.abs(self.moveY)<self.limitY?dataStore.lastY:dataStore.lastY+self.bodyHeight*(self.moveY>0?1:-1);
 72          
 73         /***
 74          * 还需计算最大下滑高度和最大上滑高度
 75          */
 76         var listUL = document.querySelector(".quan_vcd_list");
 77         var listHeight = listUL.getBoundingClientRect().height;
 78         
 79         //如果是最后一个li，则不能下滑，
 80         var maxBottom = (listHeight - self.bodyHeight)*-1;
 81         var lastComputeY = transformY>0?0:transformY<maxBottom?maxBottom:transformY;
 82         //停止滑动之后，自动滚动距离，transition
 83         listUL.classList.add('trans');
 84         
 85         if(lastComputeY<=0){
 86             var d = lastComputeY-dataStore.lastY;
 87             d&&events.trigger("touch_move",d,(-lastComputeY/self.bodyHeight));
 88         }
 89         self.start = 0;
 90         var raf = window.requestAnimationFrame|| window.webkitRequestAnimationFrame;
 91         raf(function () {
 92             self.move(lastComputeY);
 93             self.moveY = 0;
 94             dataStore.lastY = lastComputeY;//记录确定的位置
 95             if(listHeight+dataStore.lastY<=self.bodyHeight){
 96                 events.trigger("turnPage");
 97             }
 98             setTimeout(function () {
 99                 listUL.classList.remove("trans");
100                 dataStore.lock = 0;
101                 self.resetLimitY();
102             },500);
103         });
104     }

  1 exports.init = function (opt) {
  2         var config = {
  3             props:['feedData','index'],
  4             data:function () {
  5                 return {
  6                     play_btn:0,
  7                     bg_name:"",
  8                     anim_like:[],
  9                     vloading:0
 10                 }
 11             },
 12             mounted:function(){
 13                 addEvent(this);
 14                 this.stall = 0;
 15                 this.loaderror = 0;
 16             },
 17             methods:{
 18                 playBtn:function(){
 19                     this.play();
 20                 },
 21                 onerror:function(){
 22                     errors(this,"error:");
 23                 },
 24                 onbort:function(){
 25                     errors(this,"bort:");
 26                 },
 27                 onstalled:function () {
 28                     var self = this;
 29                     if(!self.feedData.start) return;
 30                     self.vloading = 1;
 31                     self.play();
 32                     self.stall++;
 33                     if(self.stall==2){
 34                         util.showTip("网络有点慢哦~");
 35                         store.report(27,1);
 36                     }
 37                 },
 38                 onplaying:function(){
 39                     var self = this;
 40                     compute(self);
 41                     self.play_btn = 0;
 42                     self.wa("138146.34.1");
 43                     store.report(27,0);
 44                 },
 45                 onpause:function(){
 46                     setPlay(this,1);
 47                 },
 48                 waiting:function () {
 49                     var self = this;
 50                     clearInterval(self.timer);
 51                     self.loadTimes = 0;
 52                     self.timer = setInterval(function () {
 53                         self.loadTimes++;
 54                         if (self.loadTimes >= 2) {//连续3次未播放，当作是卡住了
 55                             self.aPause();
 56                             self.vloading = 1;
 57                         }
 58                     }, 1800);
 59                 },
 60                 ondurationchange:function(){
 61                     compute(this);
 62                 },
 63                 onloadedmetadata:function(){
 64                     compute(this);
 65                 },
 66                 ontimeupdate:function(){
 67                     timeupdate(this);
 68                 },
 69                 aPause:function(){
 70                     var self = this;
 71                     self.audio&&self.audio.pause();
 72                 },
 73                 aPlay:function(){
 74                     var self = this;
 75                     self.audio&&self.audio.play();
 76                 },
 77                 pause:function(){
 78                     var self= this;
 79                     self.video.pause();
 80                     self.aPause();
 81                     self.vloading = 0;
 82                     clearInterval(self.timer);
 83                 },
 84                 play:function(isMove){
 85                     videoPlay(this,isMove);
 86                 },
 87                 checkLoading:function(){
 88                     checkLoading(this);
 89                 },
 90                 show_ani:function (e) {
 91                     showAni(this,e);
 92                 },
 93                 click_pause:function (e) {
 94                     clickPause(this,e);
 95                 },
 96                 onx5videoexitfullscreen:function (params) {
 97                     this.video.play();
 98                 },
 99                 hideAll:function () {
100                     console.log("hideAll");
101                 }
102                 
103             }
104         };
105         Vue.component('video-com',util.assign(config,opt));
106     }
107     /**
108      * 视频暂停
109      * @param {*} self 
110      */
111     function clickPause(self,e) {
112         var feed = self.feedData;
113         if(feed.goods_show){
114             feed.goods_show = 0;
115             feed.hideOpt = 0;
116             return;
117         }
118         if(feed.input_show==0&&feed.comments_show){
119             feed.hideOpt = 0;
120             feed.comments_show = 0;
121             return;
122         }
123         if(feed.input_show){//评论的时候，不允许操作。
124             return;
125         }
126         if(self.dt>0){
127             self.show_ani(e);
128             return;
129         }
130         self.dt = setTimeout(function () {
131             self.dt = 0;
132         },400);
133  
134         if(self.t||Date.now-self.dbclick<1500){//dbclick之后，1.5秒不响应点击播放暂停
135             return;
136         }
137         self.t = setTimeout(function () {
138             self.t = 0;
139             if(self.play_btn){
140                 self.play();
141             }else{
142                 self.pause();
143             }
144         },600);
145     }
146     /**
147      * 双击视频动画
148      * @param {*} self 
149      */
150     function showAni(self,e) {
151         clearTimeout(self.t);
152         self.t = 0;
153         clearTimeout(self.dt);
154         self.dt = 0;
155         self.dbclick = Date.now();
156         var feed = self.feedData;
157         if(!(feed.commentid>0)&&!self.praising){
158             self.praising = 1;
159             store.add_praise(feed,function () {
160                 self.praising = 0;
161             },detailUtil.getOnePic(feed));
162         }
163         var like = self.anim_like;
164         var len = like.length;
165         if(len>=8){
166             like.splice(0,len-5);
167         }
168         like.push({x:e.pageX-100,y:height*this.index+e.pageY - 100});
169     }
170     /**
171      * 检测下载是否完成
172      * @param {*} self 
173      */
174     function checkLoading(self) {
175         var interval = window.setInterval(getLoaded,100);
176         // 获取视频已经下载的时长
177         function getLoaded() {
178             var end = 0;
179             try {
180                 end = parseInt(self.video.buffered.end(0) || 0)+2;
181             } catch(e) {
182             }
183             if(end>=self.duration){
184                 clearInterval(interval);
185                 self.loadedAll = 1;
186                 var nextItem = store.store.feedList[self.index+1];
187                 if(nextItem){//存在下一条
188                     //没有播放视频，既还没有加载完成。
189                     if(!nextItem.playurl) nextItem.playurl = nextItem.videourl;
190                     //有背景音乐，但是播放的背景音乐未加载完成，则开始加载
191                     if(!nextItem.bgmurl_p&&nextItem.bgmurl){
192                         nextItem.bgmurl_p = nextItem.bgmurl;
193                     }
194                 }
195  
196             }
197             return end
198         }
199     }
200     /**
201      * 播放视频
202      * @param {*} self 
203      */
204     function videoPlay(self,isMove) {
205         self.play_btn = 0;
206                     
207         self.aPlay();
208         
209         isMove&&(self.video.currentTime = 0);
210         if(self.audio){
211             self.video.volume = 0;
212             self.video.muted =1;
213         }
214         var feed = self.feedData; 
215         if(!feed.playurl){
216             feed.playurl = feed.videourl;
217             self.video.load();
218         }
219         self.video.play();
220         isMove&&setTimeout(function (paras) {
221             
222             if(isIOS&&!feed.start&&window.isXCX==1){
223                 self.play_btn = 1;
224                 clearInterval(self.timer);
225             }else if(!feed.start){
226                 setTimeout(function () {
227                     if(feed.start) return;
228                     setPlay(self,1);
229                     clearInterval(self.timer);
230                 },2000);
231             }
232         },1000);
233         self.waiting();
234     }
235     /**
236      * 播放中处理
237      * @param {*} self 
238      */
239     function timeupdate(self) {
240         var ct = self.video.currentTime;
241         if(!self.duration) return;
242         self.feedData.play_time = ct*100/self.duration;//设置到住storage
243         // console.log("timeupdate");
244         self.loadTimes>=2&&self.aPlay();
245         var feed = self.feedData;
246         if(!feed.start&&ct>0){
247             feed.hide = 0;//video is hide or show
248             feed.start = 1;//video is start ，should hide poster
249         }
250         self.vloading = 0;
251         self.play_btn = 0;
252         self.loadTimes = 0;
253         self.loaderror = 0;
254         if(!self.move&&ct+1>=self.duration/2){
255             self.feedData.goodsMove = 1;
256             self.move = 1;
257         }
258         if(Math.round(ct)%3==0){
259             self.wa("138146.35.1");
260         }
261         if(!self.waDone&&Math.ceil(ct+1)>=self.duration){
262             self.wa("138146.9.1");
263             self.waDone = 1;
264         }
265     }
266     /**
267      * 处理视频和背景音乐
268      * @param {*} self 
269      */
270     function addEvent(self) {
271         self.$nextTick(function () {
272             self.video = self.$el.querySelector("video");
273             var arry = ['stalled','playing', 'timeupdate', 'abort', 'error','durationchange','loadedmetadata','pause','x5videoexitfullscreen'];
274             arry.forEach(function (str) {
275                 self.video.addEventListener(str,self['on'+str]);
276             });
277             if(self.index==0){
278                 loadWX(function (env) {
279                     if(env&&isAndroid) return;
280                     self.play();
281                 });
282             }
283         });
284         var feed = self.feedData;
285         handleBGM(feed,self);
286         
287         events.listen("touch_move",function (direct,i) {
288             handleMove(self,feed,direct,i);
289         });
290     }
291     /**
292      * 处理滑动播放
293      * @param {*} self 
294      * @param {*} feed 
295      * @param {*} direct 
296      * @param {*} i 
297      */
298     function handleMove(self,feed,direct,i) {
299         if(i==self.index){
300             detailUtil.setShare(self.feedData);
301             if(!feed.playurl){
302                 feed.playurl = feed.videourl;
303                 if(!feed.bgmurl_p&&feed.bgmurl){
304                     feed.bgmurl_p = feed.bgmurl;
305                     self.audio.load();
306                 }
307                 self.video.load();
308             }
309             self.$nextTick(function () {
310                 store.addPlayNum(feed.shareid);
311                 if(self.audio&&!self.audioLoaded){
312                     var int = setInterval(function () {
313                         if(self.audioLoaded){
314                             clearInterval(int);
315                             self.play(1);
316                         }
317                     },100);
318                 }else{
319                     self.play(1);
320                 }
321             });
322         }
323         //direct>0 则是下滑,页面出现上一个视频，则当前位置的下一个视频要暂停，
324         //direct<0则是上滑，页面要播放下一个视频了，则当前位置的上一个视频要暂停
325         if(self.index == i+(direct>0?1:-1)){
326             self.pause();
327             if(!self.loadedAll){
328                 feed.playurl = "";//如果是未加载完成，那么就不要加载了。
329                 feed.start = 0;
330                 feed.hide = 1;
331             }
332             if(!self.audioLoaded){
333                 feed.bgmurl_p = "";
334             }
335         }
336         if(self.index>=i+7||self.index<=i-7){
337             feed.maxHide = 1;//最大超过16个节点，则隐藏。
338             feed.playurl = "";//最大超过16个节点，则把其他视频干掉。
339             feed.start = 0;
340             feed.hide = 1;            
341         }else{
342             feed.maxHide = 0;
343         }
344     }
345     function loadWX(cb) {
346         if(device.scene=="weixin"){
347             if(window.WeixinJSBridge){
348                 cb(1);
349             }else{
350                 document.addEventListener("WeixinJSBridgeReady", function() {
351                     cb(1);
352                 });
353             }
354         }else{
355             cb();
356         }
357     }
358     /**
359      * 处理背景
360      * @param {*} feed 
361      * @param {*} self 
362      */
363     function handleBGM(feed,self) {
364         //背景音乐
365         var bgm=feed.bgm;
366         if(bgm&&window.bgmlist&&bgmlist[bgm]){
367             self.bg_name = bgmlist[bgm].bgmname;
368             feed.bgmurl = bgm+".mp3";
369             if(self.index==0){
370                 feed.bgmurl_p = feed.bgmurl;
371             }
372             self.audio = self.$el.querySelector("audio");
373             setPlay(self,0);
374             var t = setTimeout(function () {//超时处理
375                 done();
376             },4000);
377             loadWX(throuth);
378             function throuth(){
379                 self.audio.addEventListener("canplaythrough",function () {
380                     done();
381                 });
382             }
383             function done(){
384                 clearTimeout(t);
385                 self.vloading = 0;
386                 self.audioLoaded = 1;
387                 !feed.start&&(setPlay(self,1));//还没播放，则吧播放按钮弹出来
388             }
389             
390         }else{
391             setPlay(self,1);
392         }
393     }
394     function compute(self) {
395         if(self.isCd) return;
396         var d = self.video.duration;
397         if (d>0) {
398             self.isCd = true;
399             self.duration = d;
400             self.checkLoading();
401         }
402     }
403     function setPlay(self,f){
404         self.play_btn = f;
405         self.vloading = !f;
406     }
407     function errors(self,msg) {
408         if(!self.video||!self.feedData.start) return;
409         self.loaderror++;
410         if(self.loaderror<=2){
411             self.play();
412             return;
413         }
414         setPlay(self,1);
415         msg += JSON.stringify(self.video.error)+","+self.video.src;
416         store.report(26,0,msg);
417     }

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

QQ：372900288

WX：Liuxiang0884

 

转载于:https://www.cnblogs.com/slteam/p/10379325.html