小程序-视频列表、刷新以及播放处理

需求说明

页面展示视频封面列表，然后点击封面在展示同位置播放视频。在视频滑出可视范围上下边界，以及下拉刷新时需要停止当前播放视频。

实现

wxml

<view wx:for="{{ videolist }}">
    <view>
       <video id="index{{ index }}" src="{{ item.url }}" wx:if="{{playingIndex == index}}"></video>
    </view>
    <view id="{{ index }}" class="cover" style="display: {{ playIndex == index ? 'none' : 'block' }};" bindtap="videoPlay">
      <image src="{{ item.cover }}" mode="scaleToFill">
        <image src="../../images/video/play.png" mode="scaleToFill"></image>
      </image>
    </view>
</view>

js data

videolist: null
playingIndex: null,

cover binded js func

videoPlay: function (e) {
      var length = this.data.videoArray.length
      var id = e.currentTarget.id
      console.log("@@@" + this.data.playingIndex + "|" + id)
      if(!this.data.playingIndex) {
        this.setData({
          playingIndex:id
        })
        var videoContext = wx.createVideoContext('index' + this.data.playingIndex)
        videoContext.play()
        console.log("@@@play" + this.data.playingIndex)
      } else {
        var videoContextPre = wx.createVideoContext('index' + this.data.playingIndex)
        videoContextPre.seek(0)
        videoContextPre.pause()
        console.log("@@@pause" + this.data.playingIndex)
        this.setData({
          playingIndex:id
        })
        var videoContext = wx.createVideoContext('index' + this.data.playingIndex)
        videoContext.play()
        console.log("@@@play" + this.data.playingIndex)
      }
}

当前播放视频滑出可视范围需要重写onPageScroll