微信小程序解决多个视频同时播放

解决小程序多个视频同时播放问题

思路:
1.点击播放之后,如果当前没有正在播放的视频,直接播放即可。
2.有正在播放的视频就暂停即可,然后播放当前视频。
3.这里当然要判断是否是同一个视频。

下面直接上代码

data: {
    
    
//正在播放的视频ID
      PrevideoID:''
  },
 <video id = "{
    
    {
    
    item.data.urlInfo.id}}" bindplay="handlePlay" class="videoitem" src="{
    
    {
    
    item.data.urlInfo.url}}"  >
handlePlay(event){
    
    
  //当前即将要播放的视频ID
  let videoID = event.currentTarget.id
  console.log(videoID)
  //判断是否正在有视频播放
  if(this.data.PrevideoID)
  {
    
    
    //有正在播放的视频
    //判断和上一个视频是否是同一个视频
    if(this.data.PrevideoID != videoID)
    {
    
    
      //不是同一个视频就暂停上一个视频播放
      wx.createVideoContext(this.data.PrevideoID).stop()
      //播放当前视频
      wx.createVideoContext(videoID).play()
      //更新prevideoID
      this.setData({
    
    
        PrevideoID:videoID
      })
    }
  }
  //没有正在播放的视频就直接保存videoID
  else{
    
    
    this.setData({
    
    
      PrevideoID:videoID
    })
  }
},

猜你喜欢

转载自blog.csdn.net/qq_44606064/article/details/113934931
今日推荐