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