小程序已经提供了强大的各种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，但是个人感觉没有必要
主要实现
页面
代码语言：javascript复制<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实现
代码语言：javascript复制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){
}
})效果
