我的小程序开发之路_视频播放

1.视频列表滑动功能实现

实现滑动视频列表页，导航位置不变

//使用calc()实现自适应布局
.videoScorll {
  margin-top: 10rpx;
  /* calc:可以动态计算Css的宽高，运算符左右两边必须要加空格，否则会计算失效  tabar已自动减去了*/
  /* 视口单位：vh vw 1vh = 1%的视口高度 1vw = 1%的视口宽度 */
  height: calc(100vh - 152rpx);
}

2.视频重新播放，播放时间初始化问题

使用vidoContext.seek()
bindtimeupdate 播放进度变化时触发event.detail = (currentTime,duration).触发频率250ms一次

handelPlay(event) {
      // 性能优化后
      let vid = event.currentTarget.id;
      //  创建控制video标签的实例对象
      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();
  },
  // image获取id
  handelPlay2(event){
   let vid = event.currentTarget.id;
   this.setData({
     videoId :vid
   })
  },
  
  // 监听视频播放进度
  handelTimeUpdate(event) {
    /*
     * 判断是否有当前视频记录
     * 如果有，在原有的播放记录中修改播放时间为当前的播放时间
     * 如果没有，需要在数组中添加当前视频的播放对象
     */
    let videoTimeObj = {
      vid: event.currentTarget.id,
      currentTime: event.detail.currentTime
    };
    let {
      videoUpdateTime
    } = this.data;
    // 如果当前要存放的id和数组内的id相同
    let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid)
    if (videoItem) {
      // 如果有则修改
      videoItem.currentTime = event.detail.currentTime;
    } else {
      videoUpdateTime.push(videoTimeObj)
    }
    this.setData({
      videoUpdateTime
    })
    this.videoContext.seek(this.data.currentTime);
  },

3.视频结束后自动回到开始的位置

bindended当播放到末尾时触发ended事件

// 视频播放结束调用的回调函数
  handleEnded(event){
    let {videoUpdateTime} = this.data;
    let id =videoUpdateTime.findIndex(item =>item.id == event.currentTarget.id);
    // 删除数组内容
     videoUpdateTime.splice(id,1);
     this.setData({
       videoUpdateTime
     })
  },

4.下拉刷新功能

scroll-view组件的bindrefresherpulling事件
事件的定义还要配合开启定义下拉刷新的按钮refresher-enabled
当下拉刷新后会发现下拉刷新的状态一直保持，需要配合设置下拉刷新的状态函数refresher-tiggered

 // 标记下拉框的状态
  data:{
  isTriggered:false,
  }
  
 // 下拉刷新
  handleRefresher(){
    this.getVideoList(this.data.navId);
  },
  
  // 请求完毕后，关闭上拉刷新
      this.setData({
      isTriggered:false,
    })
  

5.上拉加载

bindscrolltolower事件