小程序系列之禁用视频快进

小尘哥

发布于 2020-08-05 14:54:47

5.4K0

发布于 2020-08-05 14:54:47

小程序已经提供了强大的各种API，基本能满足大多场景下的使用，然而，客户的想法总是那么猝不及防，看起来又是那么的合理··· 比如：学习网站的一个任务，学习视频必须一分一秒的全部看完才算完成任务。但是小程序的视频播放又带有快进功能，此时有两种方案：

确保你在这个页面待的时间超过视频时长，此时存在bug，无论视频是否播放都在计算时间，因此不推荐
禁用快进功能，然而小程序视频插件又没有提供这样的API，本文主要来解决这个问题

准备

首先，我们来看小程序视频插件提供哪些可能有用的api

bindplay ：当开始/继续播放时触发play事件
bindpause ：当暂停播放时触发 pause 事件
bindended ：当播放到末尾时触发 ended 事件
bindtimeupdate ：播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchange ：视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal
bindwaiting ：视频出现缓冲时触发
binderror ：视频播放出错时触发
bindprogress ：加载进度变化时触发，只支持一段加载
bindloadedmetadata ：视频元数据加载完成时触发
bindcontrolstoggle ：切换 controls 显示隐藏时触发
bindenterpictureinpicture ：播放器进入小窗
bindleavepictureinpicture ：播放器退出小窗
bindseekcomplete ：seek 完成时触发

我们发现有一两个可能有用：【bindtimeupdate】，因为播放进度随时在变化，250ms触发一次，这里面我们可以写很多自定义逻辑

思路

1.【bindtimeupdate】每次触发的时候把当前进度保存下来

2. 下次再触发时候的播放进度和存下来的对比，如果大于3s我们就认为是快进了

3. 3s可以根据每个项目需要自行调整，如果精度要求比较高，甚至可以设置为250ms，但是个人感觉没有必要

主要实现

页面

<view class="cu-card bg-white padding-lr-xl">
  <view class="padding-tb">
       <video class="video"
      id="myVideo" 
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
      binderror="videoErrorCallback" 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
      picture-in-picture-mode="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
      bindtimeupdate='bindtimeupdate'
       bindprogress='bindprogress'
    ></video>
  </view>
  <view class="text-left  padding-bottom-xl">
   <text>这个是标题</text>
  </view>
</view>

js实现

const util = require('../../../../utils/util.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    video_real_time:0, 
    initial_time:'', //视频跳转进度 秒
    isSign:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.videoContext = wx.createVideoContext('myVideo')
  },

  bindtimeupdate(e){
    console.log('当前播放长度（s）：' + (parseInt(e.detail.duration/4)));
    var aa = 1; // 是否开启可以视频快进 1 禁止开启
     //跳转到指定播放位置 initial-time 时间为秒
     let that = this;
     //播放的总时长
    var duration = parseInt(e.detail.duration)
     //实时播放进度 秒数
     var currentTime = parseInt(e.detail.currentTime);
     if (that.data.video_real_time==0){
    )
     var jump_time = parseInt(that.data.initial_time) + parseInt(that.data.video_real_time
    }else{
     var jump_time = parseInt(that.data.video_real_time)    }
    if(aa==1){
      if (currentTime > jump_time && currentTime - jump_time>3){
        this.videoContext.seek(that.data.video_real_time)
        wx.showToast({
          title: '未完整看完该视频，不能快进',
          icon: 'none',
          duration: 2000,
        })
        return false;
      }
    } 

    that.setData({
      video_real_time: currentTime, //实时播放进度
    })
  },
  bindprogress(e){

  }
})