小程序实现一个页面多个视频点击一个视频只播放当前视频暂停其他视频

小程序实现一个页面多个视频点击一个视频只播放当前视频暂停其他视频，

第一种方法

下面是page的代码

//定义变量indexCurrent:null
 data：{
	  indexCurrent:null,
	}
video_play(e) {
    let curIdx = e.currentTarget.id;
    // 没有播放时播放视频
    console.log(curIdx)
    if (!this.data.indexCurrent) {
      this.setData({
        indexCurrent: curIdx
      })
      let videoContext = wx.createVideoContext(curIdx, this) //这里对应的视频id
      videoContext.play()
    } else { // 有播放时先将prev暂停，再播放当前点击的current
      /*this是在自定义组件下，当前组件实例的this，以操作组件内 video 组件（在自定义组件中药加上this，如果是普通页面即不需要加）*/
      let videoContextPrev = wx.createVideoContext(this.data.indexCurrent, this)
      if (this.data.indexCurrent != curIdx) {
        videoContextPrev.pause()
        this.setData({
          indexCurrent: curIdx
        })
        let videoContextCurrent = wx.createVideoContext(curIdx, this)
        videoContextCurrent.play()
      }
    }
  }

下面是wxml的代码

<!--视频列表区域-->
  <scroll-view scroll-y class="videoScroll">
    <view class="videoItem" wx:for="{{videoList}}" wx:key="id">
      <video enable-play-gesture id="video{{item.id}}" bindtap="videoPlay" src="{{item.url}}"></video>
    </view>
  </scroll-view>

第二种方法

下面是page的代码

let flag = false
page({
//点击播放/继续播放的回调
  handlePlay (event) {
    let vid = event.currentTarget.id
    //关闭上一个播放的视频
    this.vid !== vid && this.videoContext && this.videoContext.stop()

    //创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid)
    //判断视频video是否相同。如果不相同再判断flag，flag为true说明没有视频正在播放
    if (this.vid !== vid && !flag) {
      this.videoContext.play()
    }else {
      // this.videoContext.pause()
      if (flag) {
        this.videoContext.play()
        flag = false
      }else {
        this.videoContext.pause()
        flag = true
      }
    }
    this.vid = vid
  }
})

下面是wxml的代码

<!--视频列表区域-->
  <scroll-view scroll-y class="videoScroll">
    <view class="videoItem" wx:for="{{videoList}}" wx:key="id">
      <video enable-play-gesture id="video{{item.id}}" bindtap="handlePlay" src="{{item.url}}"></video>
    </view>
  </scroll-view>