。

默认情况下#xff0c;视频组件会显示进度条#xff0c;用户可以随意拖动进度条来控制视频播放进度。

然而#xff0c;在某些特定场景#xff0c;如在线教育、广告宣传等#xff0c;我们希望禁止用户拖动…

在uniapp项目中使用video组件播放视频非常方便。

默认情况下视频组件会显示进度条用户可以随意拖动进度条来控制视频播放进度。

然而在某些特定场景如在线教育、广告宣传等我们希望禁止用户拖动进度条以保持内容的连贯性。

那么如何实现这一功能呢

上一篇文章给大家介绍了通过隐藏原生进度条然后自定义一个进度条的方式来实现禁止拖拽视频进度的方法。

今天给大家介绍另外一种方式通过判断判断用户当前视频进度与实际观看时间的差值来确定用户是否使用了拖拽如果差别过大就将视频跳转到实际观看时间。

实现步骤

:initial-timeinitial_timeshow-progressfalse

enable-progress-gesturefalsetimeupdatebindtimeupdateendedended

classtop-img:srcmp4Url/video/view

/template

timeupdate是一个事件处理器它用于监听视频播放进度的更新。

当视频播放时该事件会周期性地被触发以通知开发者视频当前的播放时间currentTime已经改变。

2、创建视频上下文对象

uni.createVideoContext(myVideo)})

3、定义响应式变量并初始化视频观看时间

parseInt(e.detail.currentTime)//

判断用户当前视频进度比实际观看时间差别这里只判断了用户快进if

(jumpTime

差别过大调用seek方法跳转到实际观看时间videoContext.value.seek(watchTime.value)videoContext.value.play()}

else

parseInt(e.detail.currentTime)if

watchTime.value)

以上方法主要是通过判断用户当前的视频播放进度jumpTime与之前记录的实际观看时间watchTime.value的差值大于3秒则意味着用户进行了快进操作。

如果用户快进了则调用videoContext.value.seek(watchTime.value)方法将视频的播放位置跳转回之前记录的实际观看时间然后调用videoContext.value.play()重新开始播放视频。

希望本文对你有所帮助