uni-app的video禁止快进及seek()上的小坑

最近项目做的uniapp,一个需求,要求播放的视频不可以快进。

首先想到可以隐藏video进度条以及禁止手势控制

查看uniapp官方文档https://uniapp.dcloud.io/component/video ,可知show-progress可以控制进度条的隐藏(但是要注意后面的注释,若是不设置宽度大于240的时候才会显示,我一开始一直都是小屏播放发现即使设置了属性为false还是一直都显示着进度条,直到全屏播放后才发现进度条不见了,再返回小屏播放的时候进度条也消失了)再关闭进度控制手势enable-progress-gesture。

但是这个方法不是特别友好,比如不能前进同时也不能后退了。

之后再看文档video有一个@timeupdate事件,当视频进度发生变化的时候触发(250ms监听一次)可以获取到视频的当前播放时间,之后就好办了,思路就是当前后两次时间间隔超过1s或者2s吧,就表明用户在拖拽进度条了,通过seek方法重新定位到原先的播放进度就行。

uni-app控制video文档https://uniapp.dcloud.io/api/media/video-context?id=createvideocontext

具体代码就是

//获取你的video对象
 onReady: function (res) {
			this.videoContext = uni.createVideoContext('设置的videoID')
},

//具体方法
forbidDragProgress(res) {
		let time=res.detail.currentTime;
		if((time-this.videoCurrentTime).toFixed(3)>2){
		    let nowtime=this.videoCurrentTime.toFixed(0);
		    this.videoContext.seek(nowtime);     
		}else{
			this.videoCurrentTime=time;	
		}
}

其中有一个坑就是获取的当前时间是个浮点数,但是.seek()方法传的值貌似需要一个整数(如果没有精度控制,seek是失效的),所以需要控制一下精度。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值