微信小程序实现多视频video采坑，上下滑动视频

小程序做滑屏视频，按照h5的思路开发。一路采坑……

尝试:

第一次：relative布局，使用translateY来实现实时上滑。直接借鉴H5的思路。

页面布局relative，一个视频宽度空间充满屏幕。

每次向下只多加载一个视频，每次只保持页面存储三个屏幕的内容，也就是三个视频，向上滑动一次，再渲染一个视频。监听手势滑动，改变当前可视区域的translateY。嗯，可以的。

然后第一步核心流程就卡住了，手势touchmove，然后改变translateY非常卡，性能很好的手机，都能看到卡顿现象，差的手机更不用说，set-data本来就是异步的，实时操作set-data太频繁，小程序处理性能完全比不上H5的webview。

那既然是是滚动交互的逻辑层和视图层交互性能差，那我们就要规避这个交互，于是想试试scroll-view，这个可是系统滚动的，不需要Js参与。

 

第二次：使用scroll-view

外层套一个scroll-view，内层用多个video充满屏幕。 

每次当前视频区域内，上滑只有一个视频，下滑也只有一个视频，页面上只有三个视频。手势上滑下滑都非常流畅，简直perfect。

但是在可视区域只有一个视频，用户滑动距离短，松手的时候视频可是要自动滑下去归位呀，监听pageScroll停止之后，手动判断滚动距离，然后设置scroll-top，但是设置完之后页面明显延迟了1s，滚动完之后，停留了1s钟然后才归位，体验……很差。

这个是scroll-view的归位问题。而且文档也说了不要在scroll-view中使用video。

既然scroll-view不能使用video,导致设置值这么慢，swiper是系统支持滚动和归位呢，多好啊。那我是否可以用swiper来试试呢。

第三次：使用swiper

使用一个swiper外层，在swiper-item里面嵌入视频,vertical=true，每一个视频还是充满屏幕，

      在swiper-item里面嵌入video之后，video是最高层，并不能触发swiper的滑动事件，swiper的滑动根本不生效，监听video的滑动，去更新swiper，那问题一样，卡卡卡。

 

来去N回合，还是放弃了实时滑动，看来小程序中要如H5一样，做个好的滑屏不容易呀~

关键实现技术点：

1、页面使用absolute布局，监听视频的touchmove事件，然后在touchend之后，判断是否翻页，如果要翻页，修改animation的Y位移值。

const animation = wx.createAnimation({
            duration: 300,
            timingFunction: 'ease',
});
animation.translateY(y).step();

 

2、video，input，cover-view共存

 video,input是最高层，且input覆盖不了video。于是采用在评论页面将视频缩小到顶部。中间用input框，底部用view渲染的评论信息。这样解决了输入框和video的层级问题，更好的解决了cover-view评论渲染慢的问题。

3、视频滑动的时候，上一个视频，或者下一个视频需要的是暂停。

未播放的视频，只能pause，不能stop，否则某些手机无法再次play了。

当弹出键盘的时候，需要隐藏上一个视频，即让left:-200%，否则部分手机上会错位，播放视频和显示不一致。

4、视频未播放，也不能隐藏，或者left:-200%这样类似H5的处理方式，否则闪烁明显。

下一个视频，不能隐藏，必须渲染上去，否则滑动的时候回闪烁。

5、视频滑动增加videoLock。

增加videoLock，防止手势不停的翻页，否则部分手机播放异常，一直加载中，本身也没必要有刷刷刷的快速不停翻屏的需求。

6、视频播放，需要提前静音播放下一个视频。

下一个视频渲染上去的话，如果只是渲染，不去play(),那么部分手机无法播放，只会一直转圈，播放不了，所以需要先muted播放1s，然后timeupdate监听暂停。

const current = e.detail.currentTime;
    const duration = e.detail.duration;
    // 兜底
    if (duration <= 0) return;
    const {
        totalindex
    } = e.currentTarget.dataset;
    
    let index = -1;
    this.data.feedList.some((d, i) => {
        if (d.totalIndex == totalindex) {
            index = i;
            return true;
        }
    });
    if (index >= 0 && index != this.data.current) {
        if (totalindex != this.currentTotal) {
            const v = wx.createVideoContext('myVideo' + totalindex);
            v.pause();
            // v.stop();  不能stop
        }
        this.videoContext = wx.createVideoContext('myVideo' + this.currentTotal);
        this.videoContext.play();
        return;
    }
    const obj = {
        play_time: (current * 100) / duration
    };
    this.setData(obj);

7、cover-view性能很差，且必须是video加载之后渲染上去的才可以让cover-view盖住video。

这个是大坑，本身渲染性能差，你还得滞后video渲染，所以每次滑屏的时候，需要设置重新渲染一下才可以。

8、视频翻页的时候，需要删除视频。

减少页面上的节点和对象，否则用不了多久就crash了。

9、监听touchend，touchmove，touchstart事件

监听事件需要放在video和，cover-view上，因为部分手机的video是无法响应touch事件，所以双重保护。

this.videoLock = 1;
const windowHeight = this.windowHeight;
const maxHeight = (this.data.feedList.length - 1) * windowHeight * -1;
let y = this.transY;
if (touchY - Math.abs(this.lastY) < 20) {
    if (this.lastY < 0) {
        if (y > maxHeight) {
            y -= windowHeight;
        }
    } else {
        if (y < 0) {
            y += windowHeight;
 
        }
    }

// video和cover-view都响应touch事件，但是总是只会一个响应的
<video muted="{{current==feedIndex?false:true}}" autoplay="{{true}}" preload="meta" src="{{feedData.videourl}}" id="myVideo{{feedData.totalIndex}}" data-totalindex="{{feedData.totalIndex}}" bindtimeupdate="timeupdate" bindtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend" data-index="{{feedIndex}}" bindtap="maskTap"  loop="{{true}}" custom-cache="{{false}}" controls="{{false}}"></video>
 <cover-view wx:if="{{feedData.showCover}}" class="video_mask" bindtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend" bindtap="maskTap"></cover-view>

 

监听页面滑动动作之后，然后决定视频是否需要位移。当手势滑动之后，需要移动视频的时候，就设置animation，让页面移动到想要的位置。

// touchend之后，计算是上滑还是下滑
this.videoLock = 1;
const windowHeight = this.windowHeight;
const maxHeight = (this.data.feedList.length - 1) * windowHeight * -1;
let y = this.transY;
if (touchY - Math.abs(this.lastY) < 20) {
    if (this.lastY < 0) {
        if (y > maxHeight) {
            y -= windowHeight;
        }
    } else {
        if (y < 0) {
            y += windowHeight;

        }
    }
}

每翻页一个屏幕，去拉取下一个视频。

需要动态删除翻过的视频。如下是翻一页就删除上一个视频，开始我是保存上一个视频。实现方式一样。

//动态删除视频
self.setData(obj, () => {
    // let cur = self.data.current;
    // if (cur <= 1) {
    //     getMore();
    //     return;
    // }
    const obj = {};
    // cur = 1;
    const animation = wx.createAnimation({
        duration: 0,
        timingFunction: 'ease',
    });
    // self.transY = self.windowHeight * -1 + 0.01;
    self.transY = 0;
    animation.translateY(self.transY).step();

    const fl = self.data.feedList.slice(1);
    self.data.feedList = fl;
    // console.log('video set fl', self.data.feedList.length);
    obj.feedList = fl;
    obj.animData = animation.export();
    obj.current = 0;
    self.setData(obj, () => {
        getMore();
    });
});

监听视频的timeouupdate，去更新播放视频的进度。totalIndex是所有查询出来的视频的索引。对应每一个视频的节点的id。这里的暂停视频，不能stop，我这里注释了，原因是stop之后，iphone8 6.7.1手机无法play，会一直停留在加载状态。

timeupdate(e) {
    const current = e.detail.currentTime;
    const duration = e.detail.duration;

    // 兜底
    if (duration <= 0) return;
    const {
        totalindex
    } = e.currentTarget.dataset;
    
    let index = -1;
    this.data.feedList.some((d, i) => { // 因为list会动态删除，所以target的Index不可靠，会出现混乱
        if (d.totalIndex == totalindex) {
            index = i;
            return true;
        }
    });
    if (index >= 0 && index != this.data.current) {
        if (totalindex != this.currentTotal) {
            const v = wx.createVideoContext('myVideo' + totalindex);
            v.pause();
            // v.stop();
        }
        this.videoContext = wx.createVideoContext('myVideo' + this.currentTotal);
        this.videoContext.play();
        return;
    }
    const obj = {
        play_time: (current * 100) / duration
    };
    this.setData(obj);
}

监听视频的事件，我这边是监听video和cover-view，原因是在部分手机上video上的touch根本不响应（iphone8 6.7.1）。

这里使用muted和autoplay，是因为xxx手机在滑动之后，想要播放视频，用代码无法播放。需要先load，让静音播放一下，然后被timeupdate暂停。

// video和cover-view都响应touch事件，但是总是只会一个响应的
<video muted="{{current==feedIndex?false:true}}" autoplay="{{true}}" preload="meta" src="{{feedData.videourl}}" id="myVideo{{feedData.totalIndex}}" data-totalindex="{{feedData.totalIndex}}" bindtimeupdate="timeupdate" bindtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend" data-index="{{feedIndex}}" bindtap="maskTap"  width="100%"  loop="{{true}}" custom-cache="{{false}}" controls="{{false}}"></video>
 <cover-view wx:if="{{feedData.showCover}}" class="video_mask" bindtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend" bindtap="maskTap"></cover-view>

页面截图：好吧，截图被压缩了，这个csdn处理不好，要按比例缩小图片啊~