我的小程序开发之路_多个视频列表的优化方案

1.防止多个视频同时播放

video bindplay组件
wx.creatVideoContext(string id,object this)

单列模式： 1.需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象。 2.节省内存空间

问题：多个视频同时播放的问题
需求：
1.在点击播放的事件中需要找到上一个播放的视频
2.在播放新的视频之前关闭上一个正在播放的视频

handelPlay(event){
    /*
     * 
     * 关键：如何找到上一个视频的实例对象
     *      如何确认点击播放的视频和正在播放的视频不是同一个视频
     */
    let vid = event.currentTarget.id;
    //关闭上一个播放的视频
    this.vid !== vid && this.videoContext && this.videoContext.stop();
    this.vid = vid;
    //  创建控制video标签的实例对象
    this.videoContext =  wx.createVideoContext(vid);
  },

2.同一个页面存在多个video时，video无法正常播放一直在加载转圈

1.poster为视频设置封面

2.解决标题问题使用image进行解决

//html
<video 
   src="{{item.data.urlInfo.url}}" 
   bindplay="handelPlay" 
   id="{{item.data.vid}}"
   class="common"
   poster="{{item.data.coverUrl}}"
   wx:if="{{videoId == item.data.vid}}"
   autoplay >
</video>

   <!-- 性能优化：使用image图片代替video标签 -->
  <image wx:else class="common" 
   src="{{item.data.coverUrl}}" 
   id="{{item.data.vid}}" 
   bindtap="handelPlay" >
  </image>

//js
// 性能优化后
handelPlay(event){
    let vid = event.currentTarget.id;
    //  创建控制video标签的实例对象
    this.setData({
      videoId : vid,
    })
    this.videoContext =  wx.createVideoContext(vid);
  },

3.当视频大小和video容器大小不一致的时候，视频的表现形式

object-fit 默认contain 包含，fill 填充，cover 覆盖、