继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

波斯汪
关注TA
已关注
手记 364
粉丝 66
获赞 428

原文链接

大致思路就是,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()
    }
  },


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP