记录--短视频滑动播放在 H5 下的实现

郑允民

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

短视频已经无数不在了，但是主体还是使用 app 来承载的。本文讲述 H5 如何实现 app 的视频滑动体验。
无声胜有声，一图顶百辩，且看下图：

网址链接（需在微信或者手Q中浏览）

从上图可以看到，我们主要实现的功能也是本文要讲解的有：

• 上滑查看新短视频
  
• 下滑查看历史短视频
  
• 滑动距离大于一个距离才上翻，否则归位
  
• 滑动有速率的概念，如果速率达到一定值，距离不够，也会翻页
  
• 自动播放的问题
  
• 如何保证当前视频的播放流畅度
  

Let's do it ~~~~~~~~~~~~~~~~

本文文字说明可仔细看，很多采坑路上的总结。小程序下滑动视频的采坑之路下篇跟上。

HTML + CSS 页面结构

页面布局采用 ul 布局，如下：

 主要样式：

1. .quan_vcd_list-item{
2.     width:100%;
3.     height:100vh;
4.     overflow:hidden;
5.     position:relative;
6.     -webkit-overflow-scrolling:touch;
7. }
8. .quan_vcd_list.trans{
9.     transition:transform .3s ease-out 0s,-webkit-transform .3s ease-out 0s;
10. }
11. video .video_hide{
12.     left:-100%;
13. }

复制代码

每个item充满屏幕即可，增加松手时候的动画。

1. [/code]video的html，其中两个三个重要点：
2. [list]
3. [*]video需要先要将video移出屏幕外来达到隐藏的目的，如果用display:none的话，用户点击可能会出现异常。
4. [*]设置playsinline，让视频在当前页面播放而不是全屏。
5. [*]x5-video-can-play-with-audio=true，且先执行播放音再播放视频。如果不设置这个值，那么在微信h5页面，会出现播放播放了视频，音频自动停止的场面。
6. [/list]ul 是一个外层列表，宽度 100%即可。每一个视频项是一个充满屏幕的节点。本文不做重点讲述了，感兴趣可以自行尝试。
7. [size=5]核心js代码[/size]
9. 监听用户手势，动态设置ul的translateY，然后执行音频和视频的播放。so easy!
10. [size=4]手势滑动[/size]
12. 手势滑动播放视频翻页，主要有两个条件：滑动距离和滑动加速度。
13. [list=1]
14. [*]初始化 Touch 主要是重置参数，记录最后的位移，存储页面的高度。绑定 touch 事件。
15. [/list][code]function Touch() {
16.   this.init();
17. }
18. Touch.fn = Touch.prototype;
19. Touch.fn.init = function(params) {
20.   this.lastY = this.translateY; //记录当前位移
21.   this.startY = 0;
22.   this.moveY = 0;
23.   this.lock = 0; //如果在回调或上升阶段不允许滑动.
24.   this.bodyHeight = window.innerHeight;
25.   this.resetLimitY();
26.   self.isIOS = /ip(?:hone|ad|od)/.test(navigator.userAgent.toLowerCase());
27.   ["touchstart", "touchmove", "touchend"].forEach(str => {
28.     document.addEventListener(this, this[str].bind(this));
29.   });
30. };

复制代码

• 监听手势的滑动
  

这里增加了一个 lock 变量，用于当滑动翻页的时候，页面处在翻页中的状态，需要锁死滑动，否则会错乱。
lastY 是上一次滑动完之后的最终状态距离，translateY 是指滑动中的状态距离，需要实时变更 ul 的 translateY 的值
检测滑动的加速度：detectAcc

1. var a = Math.abs(this.moveY) / (Date.now() - this.start) >= 0.5;

复制代码

滑动的距离 大于 滑动的时间差的一半，则认为是主动翻页，需要执行翻页操作。

这里要注意点：ios 下再滑动过程中，可以立即执行翻页，体验很好，但是 android 不行,所以安卓需要等 touchend 之后再执行翻页

1. Touch.fn.touchstart = function(e) {
2.   if (this.lock) return;
3.   this.startY = e.touches[0].pageY;
4.   this.start = Date.now(); //标识滑动起始时间，也用于标识滑动start
5. };
6. Touch.fn.move = function(y) {
7.   this.translateY = y;
8. };
9. Touch.fn.touchmove = function(e) {
10.   if (this.lock || !this.start) return; //锁定了，或者没有start，主要是手势一直滑动情况，已经加速度划走了，手势需要松开再重新开始
11.   this.moveY = e.touches[0].pageY - this.startY;
12.   this.move(this.moveY + this.lastY);
13.   this.detectAcc();
14. };
15. /**
16. * 检测加速度
17. */
18. Touch.fn.detectAcc = function(isEnd) {
19.   // console.log(self.moveY+"  "+(Date.now()-self.start));
20.   var a = Math.abs(this.moveY) / (Date.now() - this.start) >= 0.5;
21.   if (isEnd) {
22.     if (a) {
23.       this.limitY = 0;
24.     }
25.     this.movend();
26.     return;
27.   }
28.   if (this.isIOS && a) {
29.     //IOS，可以在touchmove时直接滑动，体验流畅。
30.     this.limitY = 0;
31.     this.movend();
32.   }
33. };

复制代码

• 处理翻页操作
  

设定翻页需要滑动的最小距离，这里需要大于 1/3 个屏幕高度。
如果用户滑动的距离大于最小滑动距离，则翻页，否则执行归位。不管归位还是滑动翻页，都有一个 transition 的过程，这个过程我们不接受手势，所以需要等到位移结束之后，才重置 Lock 标识。
这里还用到了动态拉取下下一个视频（我这里一次拉取两个视频），所以需要发出 eventsBus 事件，让接受该事件拉取新的视频。

1. Touch.fn.resetLimitY = function () {
2.     this.limitY = this.bodyHeight/3;//位移多少才下滑
3. }
4. Touch.fn.touchend = function (e) {
5.     if(this.lock||this.moveY==0||!this.start) return;
6.     this.detectAcc(1);
7. }
8. Touch.fn.movend = function () {
9.     const self = this;
10.     this.lock = 1;
11.     /***
12.     * 最后上下位移小于最小值则还原为上一次位移，
13.     * 否则，那么就需要上移或下移一个body宽度，上移则translate加，下移在减去一个body
14.     * 这里是计算出了应该位移高度。
15.     */
16.     let transformY = Math.abs(self.moveY)<self.limitY?self.lastY:self.lastY+self.bodyHeight*(self.moveY>0?1:-1);
18.     /***
19.     * 还需计算最大下滑高度和最大上滑高度
20.     */
21.     let listUL = document.querySelector(".quan_vcd_list");
22.     let listHeight = listUL.getBoundingClientRect().height;
24.     //如果是最后一个li，则不能下滑，
25.     let maxBottom = (listHeight - self.bodyHeight)*-1;
26.     let lastComputeY = transformY>0?0:transformY<maxBottom?maxBottom:transformY;
27.     //停止滑动之后，自动滚动距离，transition
28.     listUL.classList.add('trans');
29.     if(lastComputeY<=0){
30.         let d = lastComputeY-self.lastY;
31.         d&&events.trigger("touch_move",d,(-lastComputeY/self.bodyHeight));
32.     }
33.     self.start = 0;
34.     (window.requestAnimationFrame|| window.webkitRequestAnimationFrame)(function () {
35.         self.move(lastComputeY);
36.         self.moveY = 0;
37.         self.lastY = lastComputeY;//记录确定的位置
38.         if(listHeight + self.lastY<=self.bodyHeight){
39.             events.trigger("turnPage");
40.         }
41.         setTimeout(function () {
42.             listUL.classList.remove("trans");
43.             self.lock = 0;
44.             self.resetLimitY();
45.         },500);
46.     });

复制代码

预加载

预加载的前提是当前视频已经加载完成了，才能预加载下一个视频。需要标识每一个视频是否加载完成。

• 如果当前视频没有加载完成，将会把预加载的视频都干掉，防止占用当前网络
  
• 如果当前视频已经加载完成，则一直预加载下一个，下下一个，对于网络好的尤为明显。
  

1. export default function videoComponent(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.         this.addEvent();
14.         this.stall = 0;
15.         this.loaderror = 0;
16.     },
17.     methods: {
18.       onstalled: function() {
19.         if (!this.feedData.start) return;
20.         this.vloading = 1;
21.         this.play();
22.         this.stall++;
23.         if (this.stall == 2) {
24.           showTip("网络有点慢哦~");
25.           store.report(27, 1);
26.         }
27.       },
28.       waiting: function() {
29.         clearInterval(this.timer);
30.         this.loadTimes = 0;
31.         this.timer = setInterval(() => {
32.           this.loadTimes++;
33.           if (this.loadTimes >= 2) {
34.             //连续3次未播放，当作是卡住了
35.             this.aPause();
36.             this.vloading = 1;
37.           }
38.         }, 1800);
39.       },
40.       ondurationchange: function() {
41.         this.compute();
42.       },
43.       onloadedmetadata: function() {
44.         this.compute();
45.       },
46.       ontimeupdate: function() {
47.         this.timeupdate();
48.       },
49.       aPause: function() {
50.         this.audio && this.audio.pause();
51.       },
52.       aPlay: function() {
53.         this.audio && this.audio.play();
54.       },
55.       pause: function() {
56.         this.video.pause();
57.         this.aPause();
58.         this.vloading = 0;
59.         clearInterval(this.timer);
60.       },
61.       play: function(isMove) {
62.         this.videoPlay(isMove);
63.       },
64.       checkLoading: function() {
65.         checkLoading(this);
66.       },
67.       onx5videoexitfullscreen: function() {
68.         this.video.play();
69.       }
70.     }
71.   };
72.   Vue.component("video-com", util.assign(config, opt));
73. }

复制代码

滑动视频处理

滑动播放是关键，需要保证用户手势和执行播放需要是同步的，否则会出现部分手机播放失效，需要多点击一下播放。

• 如果是当前视频，则需要播放当前视频和音频
  
• 需要停止还没有下载完的视频和音频（停止的做法就是将视频的url置空即可），否则影响当前播放的顺畅度。对于已经下载完的了则不需要处理。
  
• 同一个页面最大存在16个视频(ios的限制)，已当前视频为中心，上下保留七个视频，其余视频全部display:none
  

1. function addEvent() {
2.     this.$nextTick( ()=> {
3.         this.video = this.$el.querySelector("video");
4.         var arry = ['stalled','playing', 'timeupdate', 'abort', 'error','durationchange','loadedmetadata','pause','x5videoexitfullscreen'];
5.         arry.forEach( (str)=> {
6.             this.video.addEventListener(str,this['on'+str]);
7.         });
8.         if(this.index==0){
9.             this.loadWX(function (isWx) {
10.                 if(isWx&&isAndroid) return;
11.                 this.play();
12.             });
13.         }
14.     });
15.     this.handleBGM(this.feedData);
16.     let self = this;
17.     events.listen("touch_move", (direct,i)=> {
18.         handleMove(self,direct,i);
19.     });
20. }
21. function loadWX(cb) {
22.     if(device.scene=="weixin"){
23.         if(window.WeixinJSBridge){
24.             cb(true);
25.         }else{
26.             document.addEventListener("WeixinJSBridgeReady", function() {
27.                 cb(true);
28.             });
29.         }
30.     }else{
31.         cb();
32.     }
33. }

复制代码

播放的Error

播放在不同的手机上可能会进入error（abort,error,stall）,我们需要自动再出发一次播放，这个能解决一部分手机二次播放的问题，会无缘无故进入error,导致视频无法播放。
[code]function errors(msg) {    let self = this;    if(!self.video||!self.feedData.start) return;    self.loaderror++;    if(self.loaderror