H5W3
当前位置:H5W3 > JavaScript > 小程序 > 正文

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

大致思路就是,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="https://segmentfault.com/q/1010000011197284/{{ item.url }}" wx:if="{{playIndex == index}}"></video>
</view>
<view id="{{ index }}" class="cover" bindtap="videoPlay">
<image class="coverImg" src="https://segmentfault.com/q/1010000011197284/{{ item.img }}" mode="scaleToFill">
<image class="playImg" src="https://segmentfault.com/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()
}
},

回答

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

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

本文地址:H5W3 » 【小程序】微信小程序如何让视频结束播放

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址