【微信小程序学习】解决多个视频同时播放的问题_微信小程序video全屏模式下,可以叠加其他视频吗

我们这里用到了单例模式

单例模式：

1、需要创建多个对象的场景下，通过一个变量接收，一直保持只有一个对象

2、节省内存空间

问题：多个视频同时播放的问题

 

 点击视频1播放后，再点击视频2，视频1会暂停，播放视频2。

需求：

1、 点击播放的事件中需要找到上一个播放的视频

2、在播放新的视频之前关闭上一个正在播放的视频

关键：

1、如何找到上一个视频的实例对象

2、如何确认点击播放的视频和正在播放的视频不是同一个视频

解决方法：

 

 

//点击播放/继续播放的回调
  handleplay(event){
   
    let vid = event.currentTarget.id;
    //关闭上一个播放的数据
    this.vid !== vid && this.videoContext && this.videoContext.stop();  //前面加上&&因为 stop会显示未定义
    // if(this.vid!==vid){
    //   if(this.videoContext){
    //     this.videoContext.stop()
    //   }
    // }
    this.vid = vid;
    //创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid);
 
  },

 bindplay组件

 

 

 VideoContext API   需要获取视频的id