wxml页面:
<scroll-view class="videoScroll"scroll-y>
<view class="videoItem" wx:for="[[videoList}}" wx:key="id">
<!-- 光靠video组件模式是无法实现暂停上一个,播放下一个的操作功能 -->
<video
src="{{item.data.urlInfo.url}}"
object-fit="fill"
id="{{item.data.vid}}"
poster="{{item.data.coverUrl}}"
wx:if="{{videoId === item.data.vid}}"
bindtimeupdate="bindTimeUpdate"
/>
<image
src="{{item.data.coverUrl}}"
id="{{item.data.vid}}"
bindplay="handlePlay"
wx:else
/>
</view>
</scroll-view>
js页面:
handlePlay(e){
this.vid = e.currentTarget.id;
this.setData({
videoId:this.vid
});
this.videoContext = wx.createVideoContext(this.vid);
// 如果当前这个视频已经播放过,就跳转到指定的播放位置
let videoObj = this.data.videoUpdateTime.find(
(item) => item.vid === this.vid
);
if (videoObj){
setTimeout(()=>{
// 指定具体播放时间位置
this.videoContext.seek(videoObj.currentTime); //单位是s
},1000)
setTimeout(()=>{
this.videoContext.play();
},1100)
}
},
handleTimeUpdate(e){
const { currentTime, duration } = e.detail;
const { videoId, videoUpdateTime } = this.data;
let currentVideoObj = {
vid: videoId,
currentTime,
};
// 数组常见操作函数,find函数返回的是什么?----find函数的返回值是一个对象
let videoTimeObj = videoUpdateTime.find((item) => item.vid === videoId);
if(videoTimeObj){ // 如果视频已被播放过,就修改当前播放时间
// 不为undefined
// 修改操作
videoTimeObj.currentTime = currentTime;
if(videoTimeObj.currentTime === duration){
// 视频已被播放完毕
const index = videoUpdateTime.findIndex(item => item.vid === videoId)
videoUpdateTime.splice(index,1)
}
} else { // 如果当前视频第一次被播放,就添加到播放列表
// 新增操作
videoUpdateTime.push(currentVideoObj);
}
this.setData({
videoUpdateTime,
});
},