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

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

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

以下是具体的实现步骤:

实现步骤:

1、引入视频组件

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

html 复制代码
<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、创建视频上下文对象

javascript 复制代码
	onLoad((options) => {
		videoContext.value = uni.createVideoContext('myVideo')
	})

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

javascript 复制代码
    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 = 0
		initial_time.value = 0
	})

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

javascript 复制代码
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()重新开始播放视频。

希望本文对你有所帮助!

相关推荐
m51274 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
简鹿办公2 小时前
如何提取某站 MV 视频中的音乐为 MP3 音频
音视频·简鹿视频格式转换器·视频提取mp3音频
yufengxinpian2 小时前
集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1
单片机·嵌入式硬件·音视频·智能硬件
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript