需求说明
页面展示视频封面列表，然后点击封面在展示同位置播放视频。在视频滑出可视范围上下边界，以及下拉刷新时需要停止当前播放视频。
实现
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)
}
}