微信小程序如何让视频结束播放

Question

大致思路就是，wx:for="{{ list }}"下两个view，一个视频video，另一个封面image（客户需求，要可以自定义封面）。
主要控制变量是playIndex，当点击封面时赋予当前点击的e.currentTarget.id，而id="{{ index }}"（index是微信wx:for自带的）。
在video加个wx:if，playIndex == index是判断条件，也就是说点击封面，对应的video的wx:if=true会渲染。
这时最好设置一个延迟来执行videoContext.play()，因为video渲染需要时间，无延迟的话还没渲染完play()就执行了。
其他video的wx:if=false（因为只有要播放的video渲染，而其他video不渲染，所以视频列表不会卡顿）
代码很挫，希望能帮到人

// wxml
<view wx:for="{{ list }}">
    <view>
       <video id="index{{ index }}" src="{{ item.url }}" wx:if="{{playIndex == index}}"></video>
    </view>

    <view id="{{ index }}" class="cover" style="display: {{ playIndex == index ? 'none' : 'block' }};" bindtap="videoPlay">
      <image class="coverImg" src="{{ item.img }}" mode="scaleToFill">
        <image class="playImg" src="../../images/video/play.png" mode="scaleToFill"></image>
      </image>
    </view>
</view>

// js
//data
 playIndex: null,

// 点击cover播放，其它视频结束
  videoPlay: function (e) {
    var length = this.data.list.length
    var id = e.currentTarget.id
    var that = this
    that.setData({
      playIndex: id
    })

    setTimeout(fnPlay, 500)

    function fnPlay() {
        var videoContext = wx.createVideoContext('index' + that.data.playIndex)
        videoContext.play()
    }
  },

——————第二次更新分割线——————————

解决了，用wx:if取消video的渲染即刻

——————更新分割线————————

一个小程序中有多个视频，当打开一个视频时其它视频停止播放，我是用

videoContextPrev.seek(0)
videoContextPrev.pause()

来伪装结束视频
但这样开多了似乎会卡顿（我并不确定现在开多了会卡顿是否是这个原因造成的）
有没有其他办法真正结束视频，我看有小程序实现这样的功能，视频中断结束再次打开得重新加载（而我的再次打开却立马开始，也就是说视频仅仅只是暂停在0s而已）

// 点击cover播放，其它视频结束
  videoPlay: function (e) {
    var length = this.data.list.length
    var id = e.currentTarget.id  
    log(this.data.playIndex, id) // 当前播放与当前点击
    if (!this.data.playIndex) { // 没有播放时播放视频
      this.setData({
        playIndex: id
      })
      var videoContext = wx.createVideoContext('index'+id)
      videoContext.play()
    } else {                    // 有播放时先将prev暂停到0s，再播放当前点击的current
      var videoContextPrev = wx.createVideoContext('index' +this.data.playIndex)
      videoContextPrev.seek(0)
      videoContextPrev.pause()
      this.setData({
        playIndex: id
      })
      var videoContextCurrent = wx.createVideoContext('index' +this.data.playIndex)
      videoContextCurrent.play()
    }
  },

Answer 1

你好，我这边按照您的做法写，可以实现禁止播放多个视频，但是视频封面的处理有BUG，点击消失后，会黑屏

Answer 2

用您的方法可以结束播放，但是是否可以做到暂停呢？