//点击继续播放
handlePlay(event) {
/*问题: 多个视频同时播放的问题
* 需求:
* 1. 在点击播放的事件中需要找到上一个播放的视频
* 2. 在播放新的视频之前关闭上一个正在播放的视频
* 关键:
* 1. 如何找到上一个视频的实例对象
* 2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
* 单例模式:
* 1. 需要创建多个对象的场景下,通过一个变量接收,始终保持只有一个对象,
* 2. 节省内存空间
* */
let vid = event.currentTarget.id;
/* 将video换成image,则没有多个视频播放问题,则下面代码可无
// this.vid !== vid && this.videoContext && this.videoContext.stop();
// // if(this.vid !== vid){
// // if(this.videoContext){
// // this.videoContext.stop()
// // }
// // }
// this.vid = vid; */
this.setData({
videoId: vid,
});
this.videoContext = wx.createVideoContext(vid);
//判断是否播放记录
let { videoUpdateTime } = this.data;
let videoItem = videoUpdateTime.find((item) => item.vid === vid);
if (videoItem) {
this.videoContext.seek(videoItem.currentTime);
}
this.videoContext.play();
},
//记录播放数据
handleTimeUpdate(event) {
let videoTimeObj = { vid: event.currentTarget.id, currentTime: event.detail.currentTime };
let { videoUpdateTime } = this.data;
/*
* 思路: 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
* 1. 如果有,在原有的播放记录中修改播放时间为当前的播放时间
* 2. 如果没有,需要在数组中添加当前视频的播放对象
*
* */
let videoItem = videoUpdateTime.find((item) => item.vid === videoTimeObj.vid);
if (videoItem) {
videoItem.currentTime = event.detail.currentTime;
} else {
videoUpdateTime.push(videoTimeObj);
}
this.setData({
videoUpdateTime,
});
},
/* 视频播放结束回调 */
handleEnded(event) {
/* 移除播放记录 */
let { videoUpdateTime } = this.data;
videoUpdateTime.splice(
videoUpdateTime.findIndex((item) => item.vid === event.currentTarget.id),
1
);
this.setData({
videoUpdateTime,
});
},
<!-- 视频列表区 -->
<scroll-view class="videoScroll" scroll-y>
<view class="videoItem" wx:for="{{ videoList }}" wx:key="id">
<video
class="common"
id="{{ item.data.vid }}"
bindplay="handlePlay"
src="{{ item.data.urlInfo.url }}"
poster="{{ item.data.coverUrl }}"
wx:if="{{ videoId===item.data.vid }}"
bindtimeupdate="handleTimeUpdate"
bindended="handleEnded"
></video>
<!-- 性能优化 使用image代替video -->
<image
wx:else
id="{{ item.data.vid }}"
bindtap="handlePlay"
src="{{ item.data.coverUrl }}"
class="common"
></image>
<view class="content">{{item.data.title}}</view>
<view class="footer">
<image class="avatar" src="{{ item.data.creator.avatarUrl }}"></image>
<text class="nickName">{{item.data.creator.nickname}}</text>
<view class="comments_praised">
<text class="item">
<text class="iconfont icon-aixin"></text>
<text class="count">{{item.data.praisedCount}}</text>
</text>
<text class="item">
<text class="iconfont icon-pinglun"></text>
<text class="count">{{item.data.commentCount}}</text>
</text>
<button open-type="share" class="item btn">
<text class="iconfont icon-gengduo-shuxiang"></text>
</button>
</view>
</view>
</view>
</scroll-view>