小程序 列表视频 及 滑过该视频 停止播放

分析原因：因为有个列表页，包含图片+文字类，文字类，视频类。视频类占比比较多。正常使用wx:for进行循环展示，在且换tab的时候导致页面卡顿，调查发现，当页面全是图片或者文字的时候，不会出现这种情况，只有视频比较多的时候会出现，开发者工具也会经常黑屏，需要重新打开

定位问题 ：多视频加载导致

**解决问题1 **：在所有的视频上添加一张图片做封面

<view wx:for-item="teach" wx:key="index">
	<view class="vodeoList">
		<view>
			<video autoplay class="myVideo" id="video{{index}}" src="{{item.attachment}}" wx:if="{{playingIndex == index}></video>
		</view>
		<view id="{{index}}" class="{{playingIndex == index ? 'noneClass cover' : 'blockClass cover' }}" bindtap="videoPlay">
			<image class="myImg" src="{{item.cover!= '' ? item.cover : '../../image/vio.png'}}"></image>
			<image class="playImg" src="../../image/play.png"></image>
		</view>
	</view>
</view>

.noneClass{
 display: none;
}
.blockClass{
 display: block;
}
.vodeoList{
  position: relative;
}
.playImg{
  position: absolute;
  left: calc(50% - 28rpx);
  top: calc(50% - 28rpx);
  z-index: 99;
  width: 56rpx;
  height: 56rpx;
}
.myVideo,.myImg{
  height: 350rpx;
  width: 100%;
  margin-top: 15rpx;
}
.myImg{
  border: 1rpx solid #f1f1f1;
  background: #333;
}

videoPlay: function (e) {
   var id = e.currentTarget.id
   if (!this.data.playingIndex) {
     this.setData({
       playingIndex: id
     })
     var videoContext = wx.createVideoContext('video' + this.data.playingIndex)
     videoContext.play()
   } else {
     var videoContextPre = wx.createVideoContext('video' + this.data.playingIndex)
     videoContextPre.seek(0)
     videoContextPre.pause()
     this.setData({
       playingIndex: id
     })
     var videoContext = wx.createVideoContext('video' + this.data.playingIndex)
     videoContext.play()
   }
 },

解决问题2 : 页面滚动，当前视频停止播放。需要写onPageScroll方法

// 滚动监听生命周期函数(视频播放暂停)
  onPageScroll(e) { 
    let screenHeight = wx.getSystemInfoSync().windowHeight
    let topBottomPadding = (screenHeight - 175) / 2
    const videoObserve = wx.createIntersectionObserver()
    videoObserve.relativeToViewport({
        bottom: -topBottomPadding,
        top: -topBottomPadding
      })
      .observe(".myVideo", (res) => {
      var videoContext = wx.createVideoContext(res.id)
        let {
          intersectionRatio
        } = res
        if (intersectionRatio === 0) {
          //离开视界，因为视窗占比为0，停止播放
          videoContext.pause()
        }
      })
  },

onPageScroll引发的BUG
视频正常的停止按钮不好用了（画面停住了，但是声音并没有停止），由于没有真机测试，直接提交了代码，真机测试的时候发现，停止按钮不好用了

onPageScroll引发的BUG – 解决办法：给video标签添加停止事件，代码来控制暂停 bindpause="stopPlay"

<video autoplay bindpause="stopPlay" class="myVideo" id="video{{ index }}" 
src="{{item..attachment}}" wx:if="{{playingIndex == index}}"></video>

stopPlay(e) {
 var id = e.currentTarget.id
 var videoContextPre = wx.createVideoContext('index' + this.data.playingIndex)
 videoContextPre.pause()
},