wxml:
<view class="pos">
<video bindpause="playpause" bindended="playend" data-index="{{index}}" class="myVideo {{item.isPlay ? '' : 'hide'}}" src="{{item.urlPreview}}" id="myVideo{{index}}" style="width:{{item.width}}rpx;height:{{item.height}}rpx"></video>
<view bindtap="videoPlay" data-index='{{index}}' wx:if="{{!item.isPlay}}">
<image src="{{item.thumbnailPreview}}" class="imgBox" style="width:{{item.width}}rpx;height:{{item.height}}rpx"></image>
<image class="video" src="/images/video.png"></image>
</view>
</view
css:
.myVideo {
width: 100%;
display: block;
margin: 0;
padding: 0;
margin: 0 auto;
margin-top: 20rpx;
}
.video {
width: 60rpx;
height: 60rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pos {
position: relative;
}
.hide {
display: none !important;
}
.imgBox {
display: block;
margin: 0;
padding: 0;
margin: 0 auto;
margin-top: 20rpx;
}
JS:
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
isPlay:false,//是否播放
thumbnailPreview:"",//视频封面
urlPreview:"",//视频地址
width:"750",//视频宽度
height:"300",//视频高度
}],
},
//多个视频文件只能播放一个视频，其他视频暂停，点击当前暂停当前
async videoPlay(event) {
var curIdx = event.currentTarget.dataset.index;
let det = this.data.list;
this.pp(det, curIdx)
},
pp(det, curIdx) {
// 有播放时先将prev暂停，再播放当前点击的current
if (this.data.indexCurrent != null) {
var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent, this)
if (this.data.indexCurrent != curIdx) {
det[this.data.indexCurrent].isPlay = false;
det.splice(this.data.indexCurrent, 1, det[this.data.indexCurrent])
videoContextPrev.stop();
}
det[curIdx].isPlay = true;
det.splice(curIdx, 1, det[curIdx])
this.setData({
indexCurrent: curIdx,
list: det
})
var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx, this)
videoContextCurrent.play()
} else { // 没有播放时播放视频
det[curIdx].isPlay = true;
det.splice(curIdx, 1, det[curIdx])
this.setData({
indexCurrent: curIdx,
list: det
})
var videoContext = wx.createVideoContext('myVideo' + curIdx, this) //这里对应的视频id
videoContext.play()
}
},
//播放暂停
playpause(event) {
var curIdx = event.currentTarget.dataset.index;
let det = this.data.list;
det[curIdx].isPlay = false;
det.splice(curIdx, 1, det[curIdx])
this.setData({
list: det
})
},
//播放结束
playend(event) {
var curIdx = event.currentTarget.dataset.index;
let det = this.data.list;
det[curIdx].isPlay = false;
det.splice(curIdx, 1, det[curIdx])
this.setData({
list: det
})
},
})
