微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停

微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停

html

    <view class='videoBoxTitle'>视频列表</view>
    <block wx:for="{{videoListData}}" wx:index='index' wx:key='id'>
      <video class="myVideo" id='{{item.id}}' autoplay='{{false}}' show-center-play-btn="{{true}}" controls poster="{{item.img}}" src='{{item.videosrc}}' bindplay="videoClickAction" data-index="{{index}}" data-id="{{item.id}}" data-even="{{item}}">
        <view class="videoItemTitle">{{item.title}}</view>
      </video>
    </block>
  </view>

js

  data: {
    // 当前播放id
    currentPlayId: '',
    videoContext: wx.createVideoContext("当前数组中随便一条视频的id，可使用第一条视频id", this),
    videoListData: [],
  },


<!-- 点击播放按钮触发事件-->
videoClickAction(event) {

    let _this = this;
    //当前即将要播放的视频ID
    let clickVideoId = event.currentTarget.dataset.even.id;
    //判断是否正在有视频播放
    if (_this.data.currentPlayId) {
      //有正在播放的视频
      //判断和上一个视频是否是同一个视频
      if (_this.data.currentPlayId != clickVideoId) {

        // _this.setData({
        //   videoContext: wx.createVideoContext(String(_this.data.currentPlayId), _this)
        // },() => {
        _this.data.videoContext.pause();
        // })

        // 暂停上一个视频
        // _this.data.videoContext. pause();
        // 播放当前点击的视频
        _this.setData({
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        }, () => {
          // 播放（次行代码可省略）
          _this.data.videoContext.play();
        })

        //更新正在播放视频id currentPlayId
        _this.setData({
          currentPlayId: clickVideoId
        })
      }
    }
    //没有正在播放的视频就直接保存clickVideoId
    else {
      _this.setData({
        currentPlayId: clickVideoId
      },() => {
      //并且使用当前视频ID（clickVideoId）创建上下文videoContext，为了点击下条视频暂停该视频
        _this.setData({
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        })
      })
    }
  },

实现思路

1.通过全局变量currentPlayId保存当前播放视频的id，
2.判断当前是否有视频在播放：
如果有，则通过videoContext. pause()暂停当前播放的视频，使用方法videoContext.play()播放要播放的视频。更新正在播放的视频id到currentPlayId。
如果没有，则播放视频，并且将该视频id存储到currentPlayId。并且使用当前视频ID（clickVideoId）创建上下文videoContext。