当前位置：首页 > news >正文

uniapp视频禁止用户推拽进度条并保留进度条显示的解决方法——方案二

news 来源：原创 2024/9/27 5:32:07

在uniapp项目中，使用<video>组件播放视频非常方便。默认情况下，视频组件会显示进度条，用户可以随意拖动进度条来控制视频播放进度。然而，在某些特定场景，如在线教育、广告宣传等，我们希望禁止用户拖动进度条，以保持内容的连贯性。那么，如何实现这一功能呢？

上一篇文章给大家介绍了通过隐藏原生进度条然后自定义一个进度条的方式来实现禁止拖拽视频进度的方法。今天给大家介绍另外一种方式，通过判断判断用户当前视频进度与实际观看时间的差值，来确定用户是否使用了拖拽，如果差别过大，就将视频跳转到实际观看时间。

以下是具体的实现步骤：

实现步骤：

1、引入视频组件

首先，在页面的.vue文件中引入<video>组件，并设置相关属性。

<template><view><video id="myVideo" :initial-time="initial_time"show-progress=false enable-progress-gesture=false@timeupdate="bindtimeupdate"@ended="ended" class="top-img":src="mp4Url"></video></view>
</template>

其中， @timeupdate是一个事件处理器，它用于监听视频播放进度的更新。当视频播放时，该事件会周期性地被触发，以通知开发者视频当前的播放时间（currentTime）已经改变。

2、创建视频上下文对象

	onLoad((options) => {videoContext.value = uni.createVideoContext('myVideo')})

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

    const video_real_time = ref(0) //实际播放进度const initial_time = ref(0) //该用户看到的位置const videoTime = ref(0) //视频时间长度const videoContext = ref('') //用来存储video对象const watchTime = ref(0) //实际观看时间onShow(() => {// 调用接口取到该用户播放的位置（秒）// 这里的0代指从接口放回的时间watchTime.value = 0initial_time.value = 0})

4、在bindtimeupdate事件中判断时间差

const bindtimeupdate = (e) => {videoTime.value = parseInt(e.detail.duration)// 记录用户当前视频进度const jumpTime = parseInt(e.detail.currentTime)// 判断用户当前视频进度比实际观看时间差别，这里只判断了用户快进if (jumpTime - watchTime.value > 3) {// 差别过大，调用seek方法跳转到实际观看时间videoContext.value.seek(watchTime.value)videoContext.value.play()} else {video_real_time.value = parseInt(e.detail.currentTime)if (video_real_time.value > watchTime.value) {watchTime.value = video_real_time.value}}}

总结：

以上方法主要是通过判断用户当前的视频播放进度jumpTime与之前记录的实际观看时间watchTime.value的差值大于3秒，则意味着用户进行了快进操作。如果用户快进了，则调用videoContext.value.seek(watchTime.value)方法将视频的播放位置跳转回之前记录的实际观看时间，然后调用videoContext.value.play()重新开始播放视频。

希望本文对你有所帮助！