小程序系列之禁用视频快进
时间:2022-07-22
本文章向大家介绍小程序系列之禁用视频快进,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
小程序已经提供了强大的各种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){
}
})
效果
- C++内存管理学习堆和栈
- 人人公司宣布收购美国卡车社区平台Trucker Path
- Mysql字符串截取总结:left()、right()、substring()、substring_index()
- c++程序的内存格局
- SpringMVC中利用@InitBinder来对页面数据进行解析绑定
- 门罗盘点:2017年那些AI击败人类的瞬间
- sizeof和strlen的区别
- mysql索引使用技巧及注意事项
- 条码支付新规,微信支付宝还好么?
- 获取对象属性类型、属性名称、属性值的研究:反射和JEXL解析引擎
- 不联网不插U盘也不一定安全 黑客能用声波攻击你的硬盘
- 解决xcode打开时loading假死的问题
- 深度学习之DNN与前向传播算法
- AI世代高速运算需求增 半导体新材料趁势崛起
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux 查看远程服务器文件状态的方法
- 安装ubuntu时黑屏的解决办法(3种)
- linux输入yum后提示: -bash: /usr/bin/yum: No such file or directory的解决方法
- 分布式锁,三种实现方式,性能对比分析!
- Linux 中锁定和解锁用户帐户的三种方法
- centos8 安装 nginx的详细教程(图文)
- Ubuntu系统日志配置 /var/log/messages的方法
- 在Ubuntu 14 上安装 Nginx-RTMP 流媒体服务器的教程
- centos8自定义目录安装nginx(教程详解)
- VMware下Centos7桥接方式网络配置步骤详解
- Linux CentOS 6.5 卸载、tar安装MySQL的教程
- Linux CentOS 6.5 ifconfig查询不到ip的解决方法
- 打卡群2刷题总结1009——二叉树的中序遍历
- 解决Ubuntu 18.04安装VMwareTools错误问题
- 对linux下syslogd以及syslog.conf文件的解读说明