微信小程序 video 组件[播新视频旧视频暂停，再次播放延续上次播放时长]

1、引言

微信官方文档网址：媒体组件 / video (qq.com)

2、播新视频旧视频暂停

问题： 多个视频同时播放的问题

• 需求：

1. 在点击播放的事件中需要找到上一个播放的视频 2. 在播放新的视频之前关闭上一个正在播放的视频

• 关键：

1. 如何找到上一个视频的实例对象【媒体 / 地图 / wx.createMapContext (qq.com)】 2. 如何确认点击播放的视频和正在播放的视频不是同一个视频

• 单例模式：

1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象， 2. 节省内存空间

属性	类型	默认值	必填	说明
src	string		是	要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID（2.3.0）
poster	string		否	视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效
object-fit	string	contain	否	当视频大小与 video 容器大小不一致时，视频的表现形式 【contain 包含（原来尺寸）】【fill 填充（尺寸改变被拉伸）】【cover 覆盖（尺寸不变，等比例放大，短边贴合）】
bindplay	eventhandle		否	当开始/继续播放时触发play事件

代码语言：javascript复制

<view class="videoItem" wx:for="{{videoList}}" wx:key="id">
      <video 
        src="{{item.data.urlInfo.url}}" 
        bindplay="handlePlay" 
        id="{{item.data.vid}}" 
        poster="{{item.data.coverUrl}}"
        object-fit="cover"
      >
      </video>
</view>

代码语言：javascript复制

  ## 1、点击播放时，获取当前 video 组件中的 视频id
  ## 2、2.1 点击第一个视频，没有视频实例、vid，先在this上创建一个 vid 和创建 视频实例对象
        2.2 点击另一个视频，新的视频开始播放，这时的 vid 和 视频实例 还是之前第一个视频的
        2.3 判断 this 上的 vid 是否改变，改变了，去判断是否有视频实例
        3.4 有视频实例，不管是否播放，去停止它播放，再去记录新的视频实例和vid

  // 点击播放/继续播放的回调
  handlePlay(event) {
    let vid = event.currentTarget.id;

    // 关闭上一个播放的视频
    if (this.vid !== vid) {
      if (this.videoContext) {
        // 停止播放视频
        this.videoContext.stop()
      }
    }

    this.vid = vid;
    // 创建控制video标签的实例对象【参数是 video 的 id】
    this.videoContext = wx.createVideoContext(vid);
  }

3、 再次播放延续上次播放时长

当我们切换到另一个 tabnav里面，比如 现场 切换到 翻唱，再切换回 现场【已经重新请求】，这个时候 现场 中之前的播放时长无了，现在我需要，可以这样做： 思路： 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录 1. 如果有，在原有的播放记录中修改播放时间为当前的播放时间 2. 如果没有，需要在数组中添加当前视频的播放对象 3. 视频播放结束，去掉数组的该播放记录

代码语言：javascript复制

<view class="videoItem" wx:for="{{videoList}}" wx:key="id">
      <video 
        src="{{item.data.urlInfo.url}}" 
        id="{{item.data.vid}}" 
        poster="{{item.data.coverUrl}}"
        object-fit="cover"
        bindplay="handlePlay" 
        bindtimeupdate="handleTimeUpdate" 
        bindended="handleEnded"
      >
      </video>
</view>

代码语言：javascript复制

  data: {
    videoList: [], // 视频列表数据
    videoUpdateTime: [], // 记录video播放的时长
  },

  // 点击播放/继续播放的回调
  handlePlay(event) {
    let vid = event.currentTarget.id;

    // 关闭上一个播放的视频
    if (this.vid !== vid) {
      if (this.videoContext) {
        // 关闭视频
        this.videoContext.stop()
      }
    }
    this.vid = vid;

    // 创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid);

    // 判断当前的视频之前是否播放过，是否有播放记录, 如果有，跳转至指定的播放位置
    let { videoUpdateTime } = this.data;
    // 查询到 find()第一个video元素的值。没有返回 undefined
    let videoItem = videoUpdateTime.find(item => item.vid === vid);
    if (videoItem) {
      // 查询有，跳转到指定位置，单位 s
      this.videoContext.seek(videoItem.currentTime);
    }

    // 播放视频
    this.videoContext.play();
  },

  // 监听视频播放进度的回调
  handleTimeUpdate(event) {
    let { videoUpdateTime } = this.data;

    let videoItem = videoUpdateTime.find(item => item.vid === event.currentTarget.id);
    if (videoItem) { // 之前有
      videoItem.currentTime = event.detail.currentTime;
    } else { // 之前没有
      let videoTimeObj = {
        vid: event.currentTarget.id,
        currentTime: event.detail.currentTime
      };
      videoUpdateTime.push(videoTimeObj);
    }

    // 更新videoUpdateTime的状态
    this.setData({
      videoUpdateTime
    })
  },

  // 视频播放结束调用的回调
  handleEnded(event) {
    // 移除记录播放时长数组中当前视频的对象
    let { videoUpdateTime } = this.data;

    // 查询到 findIndex()第一个元素值的下标。没有返回 undefined
    videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);

    this.setData({
      videoUpdateTime
    })
  },

视频 数组 微信小程序 video 对象

0 人点赞