最近在做一个小程序，因为小程序涉及到video-swiper开发的很少，在网上看到能够详细解决问题的少之又少，都是自己按照逻辑摸索出来的，用video-swiper开发，引入的是npminstall@miniprogram-component-plus/video-swiper。持续踩坑中，修改了原组件视频无法在第一个视频播放、无法点击一次播放暂停，完善组件中分页数据新建视频dom的功能。

1、修改了@miniprogram-component-plus/video-swiper组件，发布了新的组件https://www.npmjs.com/package/miniprogram-component-video

2、npm install miniprogram-component-video，

3、在小程序工具中构建npm

4、引入miniprogram-component-video

"usingComponents": {

    "mp-video-swiper": "miniprogram-component-video"

  }

5、从数据库拿到数据后，新数据放到videoListNewDom中，传到子组件中，旧视频数据加上新数据放到videoList中

6、子组件中的properties接受到videoListNewDom数据，新建视频dom

7、setvideoList为了分享后从其他地方通过id进入页面再次获取数据后，再获取新数据后给数据去重。

8、wx.setStorageSync('slidecurrent', e.detail.current)为了记录当前页面current，

进入视频页面时设置为0

9、上面第8点的截图中绑定slide事件，监听滑动视频的当前位置，给当前视频赋评论等数据，到最后一页时，重新加载数据

10、点击让视频播放、暂停

要在mp-video-swiper 上加一个id，bindtap="change"，playShow为了显示隐藏播放按钮

change: function(){

      var vvideo = this.selectComponent("#video-swiper-id")

      var current_video = vvideo.data._videoContexts[vvideo.data._last];

      setTimeout(()=>{

        if(this.data.playShow){

          current_video.play()

          this.setData({

            playShow: false

          })

        }else{

          current_video.pause()

          this.setData({

            playShow: true

          })

        }

      })

      }

11、播放第一屏，在视频元数据加载完成时触发。因为_last在组件中为1，所以在这里给赋值为0；

if (wx.getStorageSync('slidecurrent') === 0) {

        var vvideo = this.selectComponent("#video-swiper-id")

        vvideo.data._last = 0; //如果不赋值为0，就不是从第一条播放

        vvideo.data._invalidDown = 1;

        vvideo.playCurrent(0)

      }