微信小程序中视频的显示与隐藏 _生活百科

在微信小程序中实现视频的播放与暂停需求：

视频列表中只能有一个视频在播放
点击视频实现播放与暂停功能
加载完成显示图片，点击后变为视频播放
从上次播放的位置进行播放

思路：

定义一个标记变量，控制视频的播放与暂停
- true => 本次问播放
- false => 本次为暂停
每次点击后，更新data中视频的id值
声明一个数组，用于存放播放视频的id和播放时间
【微信小程序中视频的显示与隐藏】{vid:xxx,currentTime:xxx}

事件的流程图

文章插图
代码实现：静态

<!-- 使用scroll-view组件 --><scroll-view class="scroll_video" enable-flex scroll-y><view class="scroll_videoList_item" wx:for="{{videoList}}" wx:key="index"><!-- 注意这个id是标签属性，点击视频标签，事件的回调 event属性会获取到这个id值item.data.vid == vid => 点击获取到idbindtimeupdate：视频的进度条发生变化时触发通过event.detail.currentTime获取播放的时间(详见官网)--><videosrc="https://www.huyubaike.com/biancheng/{{item.data.urlInfo.url}}"id="{{item.data.vid}}"class="scroll_video_item"wx:if="{{vid == item.data.vid ? isPlay? true : false :false}}"bindtap="clickVideo"poster="{{item.data.coverUrl}}"bindtimeupdate="handlerUpdate"></video><!-- 视频加载的时候使用图片代替，点击时切换为视频 --><imageid="{{item.data.vid}}"class="scroll_img_item"src="https://www.huyubaike.com/biancheng/{{item.data.coverUrl}}"bindtap="clickVideo"wx:else></image></view></scroll-view>

逻辑：

 //页面中使用到的数据data: {// 保存点击的nav idclickId: '',// 保存视频的数据videoList: [],// 保存点击的视频的idvid: '',// 控制视频是否播放isPlay: true,//为true =>这一次为播放,为false => 这一次为暂停},//视频的播放与暂停 clickVideo(event) {// 获取用户点击视频的id// console.log(event.currentTarget.id);let vid = event.currentTarget.id// 创建视频的上下文与video组件进行一一关联if (!this.player) {// 没有视频的上下文，创建一个this.player = wx.createVideoContext(vid)// 播放视频this.player.play()// 存储这次点击的视频的idthis.setData({vid})} else {// 有视频上下文了if (vid != this.data.vid) {// 说明再次点击的是其他的视频// 暂停上一个视频 -> 创建一个新的视频上下文 -> 播放这个视频this.player.pause()this.player = wx.createVideoContext(vid)this.player.play()this.setData({isPlay: true,//只要id不同，都是暂停上一次，播放这一次!!!vid})} else {// 说明第二次点击的是正在播放的视频if(this.data.isPlay){// 上一次的为播放，这一次需要暂停this.player.pause()// 修改状态this.setData({isPlay:false,})}else {// 上一次为暂停，这一次需要播放this.player.play()this.setData({isPlay:true,})}}}},// 视频播放的时间handlerUpdate(event) {const { videoUpdataTime } = this.data// 定义一个存储视频id和时间的对象const updateTime = {vid: event.currentTarget.id,currentTime: event.detail.currentTime,}// 如果数组里有时间，则更新时间，如果没有事件，则添加这个对象let updateItem = videoUpdataTime.find(item => item.vid == updateTime.vid)if (updateItem) {// 有，更新时间updateItem.currentTime = event.detail.currentTime} else {// 没有，添加整个对象videoUpdataTime.push(updateTime)}// 更新数据this.setData({videoUpdataTime,})},

总结：