小程序列表页面多视频播放，只允许当前视频播放

    <view class="Wrapper-a">
    <view wx:for="{{sideUrls}}" wx:key="hhh" class="side-a " data-index='{{index}}'>
    <view class="video ">
            <video controls="{{true}}" videoindex="{{item.id}}" show-center-play-btn="{{false}}" enable-progress-gesture="{{false}}" object-fit="contain" class='box-w block' id="{{item.id}}" src="{{item.video}}"  controls="{{true}}" custom-cache="{{true}}" bindended='videoEnd'></video>
            <view   class="{{playingIndex == index ? 'blockClass' : ' video_cover' }}" id="{{index}}"  bindtap="{{'play'+item.id}}">
              <image src="/images/index/ico12.png" mode="widthFix"
                class="video_play_icon"></image>
              <view class="video_bg_black"></view>
            </view>
          </view>
          <view class="h1">{{item.h1}}</view>
          <view class="h2">{{item.h2}}</view>
</view>
  </view>

.Wrapper-a{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding:30rpx;
  box-sizing: border-box;
}
.side-a{
  margin-bottom: 40rpx;
  width: 330rpx;
}
.side-a .h1{
  color: #333333;
  font-size: 24rpx;
  margin-top: 20rpx;
}
.Wrapper .container {
   background: #ffd900 url(data:image/png;base64,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);
   background-size: 162rpx 57rpx;
  background-repeat: no-repeat;
  background-position: 558rpx 50%;
  height: 96rpx;
  overflow: hidden;
  width: 100%;
}

.Wrapper .container::after{
  content: '';
  clear: both;
  display: block;
}

.Wrapper .container .bpro{
  height: 96rpx;
  overflow: hidden;
  float: left;
  margin-right: 65rpx;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAGCAYAAAD37n+BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNWI0NjZlYS0yNjE4LWVlNGMtYmJhNC0wMTAwZjIyMDBmMGIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzE3MjAzMDM5Q0Q0MTFFQjkwNkZDMjE4RUI2ODk0ODkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzE3MjAzMDI5Q0Q0MTFFQjkwNkZDMjE4RUI2ODk0ODkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NWYxNDMxN2MtMDZhOC05NzRiLTllMmYtODllNDMxZmM3YmYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM1YjQ2NmVhLTI2MTgtZWU0Yy1iYmE0LTAxMDBmMjIwMGYwYiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmnZBzEAAABaSURBVHjaYjQ2Nm5iYGCoZYCAZiCuY0AFyPJNzFJSUvuBDCYgtodiZiDej00xENeDNIA4B9A0sQCxI7piEAOmAV2THZRGUYyuAV0ThmIGqNXooB4HGwwAAgwAdVgR51KUaDwAAAAASUVORK5CYII=");
  background-size: 12rpx 6rpx;
  background-repeat: no-repeat;
  background-position: right 50%;
  padding-right: 30rpx;
}
.Wrapper .container .bpro .bpro-a{
  color: #333333;
  font-size: 26rpx;
  line-height: 96rpx;
  
  min-width: 44rpx;
}
.Wrapper .container .bpro .bdinput{
  font-size: 26rpx;
  line-height: 96rpx;
  color: #333333;

}
.side-a .h2{
  color: #999999;
  font-size: 24rpx;
  line-height: 24rpx;
  margin-top: 10rpx;
}
.video{
  position: relative;
  height: 184rpx;
  border-radius: 5rpx;
  overflow: hidden;
}
.video_cover{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
 z-index: 9999;
 border-radius: 5rpx;
  overflow: hidden;
}
.video_cover image{
  width: 64rpx;
  height: 64rpx;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.side .box {
  height: 70vh;
  background-color: #fff;
  margin: 0 15rpx;
  border-radius: 30rpx;
}
.side .down {
  padding: 72rpx 30rpx 98rpx 30rpx;
  overflow: hidden;
}
.side .name {
  font-size: 40rpx;
  color: #333333;
  padding-bottom: 25rpx;
  border-bottom: 3rpx solid #ededed;
  margin-bottom: 52rpx;
}
.side .li {
  overflow: hidden;
  line-height: 36rpx;
  margin-top: 30rpx;
}

 play(e) {
    var that = this;
    // console.log(that.data.sideUrls.length)
    var id = e.currentTarget.id;
    var index = e.currentTarget.dataset.index;
    // console.log("d",index)
    for (var i = 0; i < that.data.sideUrls.length; i++) {
      if (index === 'myVideo' + i) {
        // console.log('播放视频不做处理');
        var videoContext = wx.createVideoContext("myVideo"+i, that);
        videoContext.play();
      } else {
        // console.log('暂停其他正在播放的视频');
        var videoContext = wx.createVideoContext("myVideo"+i, that);
        videoContext.stop();
      }
      if (!this.data.playingIndex) {
        // console.log('123');
        this.setData({
          playingIndex: id
        })
      } else {
        this.setData({
          playingIndex: id
        })
      }
    }
   
  },