小程序项目2视频播放、暂停事件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

写小程序项目，遇到有多个视频播放的，可能需要停止上一个视频的播放，再去开始下一个视频播放，针对这个事件，做了一些思路总结。

//wxml文件
Page({
   data:{
     videoList:[],//该数据是从服务器请求回来的所有视频数据集合
       videoTimeUpdata: [],//存储视频播放时长和具体播放的是那个视频
   },
   // 点击视频播放的回调
    handlePlay: function (event) {
    // （1）存储videoId标识
    let vid = event.currentTarget.id
    this.setData({
      videoId: vid
    })
    // 关闭上一个播放的视频
    // this.vid !== vid && this.videoContext && this.videoContext.stop()//该方法时关闭视频
    // this.vid = vid

    // （2）//创建视频实例对象，传入当前vide组件的id，就代表这个视频对象控制当前的<vide>组件
    this.videoContext = wx.createVideoContext(vid)

    // （3）找到被点击的视频播放过的时间
    const { videoTimeUpdata } = this.data;   //该数据具体存放内容在下面图片上
    // （4）第一次点击某一个视频，肯定没有videoTiem，所以直接走else，播放了别的视频，回头再点击这个视频，就有了，就会走if
    const videoItem = videoTimeUpdata.find(item => item.vid === event.currentTarget.id)
    if (videoItem) {
      this.videoContext.seek(videoItem.currentTime)
    } else {
      this.videoContext.play()
    }
  },
})
 <scroll-view scroll-y class="videoScroll">
    <view class="videoItem" wx:for="{{ videoList }}" wx:key="id">
      <!-- bindplay开始播放/继续播放触发的事件 -->
     <video
        bindplay="handlePlay"
        class="common"
        object-fit="cover"
        src="{{ item.data.urlInfo.url }}"
        id="{{ item.data.vid }}"
        poster="{{ item.data.coverUrl }}"
        wx:if="{{ videoId === item.data.vid }}"
        bindtimeupdate="handleTimeUpdate"   //该事件在下面图片上
        bindended="handleVideoEnd"    //该事件在下面图片上
      ></video>
</scroll-view>

思路：

需求：

1. 在点击播放的事件中找到上一个播放的视频（把上一个视频上下文对象存到页面组件的 videoContext属性上，并且也把vid属性存到this.vid属性上）
2. 在播放新的视频之前关闭上一个视频（如果this.vid！==vid证明点击的不是同一个视频，并且this.videoContext有值，说明已经播放过一个视频了）

关键：

1. 如何找到上一个视频的实例对象
2. 如何确认点击播放的视频和上一个不同

单例模式：

1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象
2. 节省空间 以上就是我针对小程序中视频播放暂停和开始的总结逻辑代码，但是也有很多不足的地方，还有很多情况没有考虑到