最近项目做的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是失效的),所以需要控制一下精度。