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

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

        在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()重新开始播放视频。 

        希望本文对你有所帮助!

 

相关文章:

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

在uniapp项目中&#xff0c;使用<video>组件播放视频非常方便。默认情况下&#xff0c;视频组件会显示进度条&#xff0c;用户可以随意拖动进度条来控制视频播放进度。然而&#xff0c;在某些特定场景&#xff0c;如在线教育、广告宣传等&#xff0c;我们希望禁止用户拖动…...

mysql复合查询 -- 多表查询(介绍,笛卡尔积,使用),自连接(介绍,使用)

目录 多表查询 介绍 使用 表数据 显示雇员名,雇员工资,以及所在部门名 显示部门号为10的部门名,员工名,工资 自连接 介绍 场景 表数据 题目 子查询 自连接 多表查询 介绍 实际开发中往往数据来自不同的表&#xff0c;所以需要多表查询 语法: from 表1,表2 (笛卡…...

【个人笔记】数据一致性的解决方案

保证数据一致性&#xff1a;指保证redis里的数据和mysql的数据是一致的&#xff0c;不能说mysql更新了&#xff0c;但redis里面的还是旧的数据&#xff0c;反之亦然 先说结论&#xff1a;增删改的时候&#xff0c;把Redis中的缓存删了 为什么不先更新数据库&#xff0c;再更新…...

【WPF】多屏幕展示

使用环境为.Net Framework&#xff0c;如果有.Net 6的解决方案&#xff0c;欢迎交流。 话不多说&#xff0c;先上代码&#xff01; /// <summary>/// Window窗口展示设置/// </summary>/// <param name"monitor"></param>/// <param nam…...

vue admin 若依框架 解决无权限时进入死循环的问题 auths

核心原因&#xff1a; if (auths && auths.length > 0) { // like12 find bug,数组为空[]时依然会进入死循环 原来为&#xff1a;if (auths) // 获取用户信息getInfo({ commit, state }) {return new Promise((resolve, reject) > {getInfo(state.token).then(…...

kubernetes存储入门(kubernetes)

实验环境依旧是三个节点拉取镜像&#xff0c;然后在master节点拉取资源清单&#xff1a; 然后同步会话&#xff0c;导入镜像&#xff1b; 存储入门 ConfigMap volume卷--》volumemount&#xff08;挂载卷&#xff09; Glusterfs NFS ISCSI HostPath ConfigMap Secret E…...

局部代理有什么好处?为什么不使用全局代理?

1. 什么是局部代理与全局代理&#xff1f; 局部代理&#xff1a;局部代理只会对特定应用程序或特定的网络流量进行代理&#xff0c;而不会影响其他网络流量。例如&#xff0c;你可以设置浏览器使用代理&#xff0c;而其他应用程序如邮件客户端或游戏仍然使用本地网络连接。 全…...

ssm模糊知识点整合

一、参数绑定常用注解 RequestParam&#xff1a;用于将请求参数绑定到你的方法参数上。 PathVariable&#xff1a;用于将路径变量绑定到你的方法参数上。 RequestBody&#xff1a;用于将请求主体绑定到你的方法参数上&#xff0c;通常用于绑定POST请求的JSON或XML数据。 Req…...

2、Spring Boot 3.x 集成 Feign

一、前言 本篇主要是围绕着两个点&#xff0c;1、集成 Feign&#xff0c;2、分离feign接口层&#xff0c;独立服务&#xff1b; 还有一点就是上篇文章的服务 iot-channel、system-server 服务名称调整成为了 chain-iot-channel、chain-system二、搭建 chain-common 服务 pom.…...

深度学习-图像处理篇-5ResNet和ResNeXt

解决问题&#xff1a; 梯度消失或梯度爆炸 退化问题(degradation problem) 迁移学习 ResNeXt...

类的关联、依赖、聚合和组合关系的思考(一)

最近在看《设计模式》这本书&#xff0c;发现对类之间的关系还没搞的很明白&#xff0c;而类之间的关系对读书、阅读代码和代码设计都非常重要&#xff0c;因此边看书边查阅了一些资料&#xff0c;感觉有些理解了。下面是我的一些思考&#xff0c;分享一下。 查阅了很多博客&a…...

云舟观测:集成开源Grafana Faro构建前端页面性能监控平台

在当今互联网时代&#xff0c;面对纷乱繁杂的网上资源&#xff0c;用户的耐心和注意力是极为宝贵的资源&#xff0c;当用户访问一个网站或应用时&#xff0c;他们期望的是快速且无缝的体验&#xff0c;任何加载延迟或功能故障都可能导致用户流失&#xff0c;影响品牌体验。因此…...

c# 子类继承父类接口问题

在C#中&#xff0c;子类并不直接“继承”父类继承的接口&#xff0c;但子类的确会继承父类对接口的实现&#xff08;如果父类实现了该接口&#xff09;。这里有一些关键的概念需要澄清&#xff1a; 接口继承&#xff1a;当一个类实现了某个接口时&#xff0c;它必须实现接口中…...

Vue 中自定义指令的探索与实践

文章目录 一、Vue 自定义指令简介二、基本语法三、指令的值四、封装v-loading指令五、总结 在 Vue 开发中&#xff0c;自定义指令为我们提供了一种强大的方式来操作 DOM 元素&#xff0c;实现特定的交互效果和功能增强。本文将深入探讨 Vue 中自定义指令的基本语法、指令的值的…...

Vue3通过$emit实现子向父传递数据

引言 子组件通过$emit触发事件&#xff0c;并传递数据&#xff0c;父组件在使用子组件时就可以绑定子组件事件&#xff0c;在事件处理函数中拿到子组件传来的数据 子组件传递数据 函数声明&#xff1a;$emit(事件名, 传递的数据 . . .) 子组件传递的数据会依次传递给父组件的…...

代码随想录算法训练营第十四天|递归 226.翻转二叉树 101. 对称二叉树 104.二叉树的最大深度 111.二叉树的最小深度

226.翻转二叉树 翻转一棵二叉树。 思路&#xff1a; 在这里需要注意的是&#xff0c;在递归的时候唯独中序遍历是不可用的&#xff0c;这是因为先对左子树进行了反转&#xff0c;又对自身进行了反转&#xff0c;对自身反转后原本的左子树变成了右子树&#xff0c;如果此时又轮…...

Spark 任务与 Spark Streaming 任务的差异详解

Spark 任务与 Spark Streaming 任务的主要差异源自于两者的应用场景不同&#xff1a;Spark 主要处理静态的大数据集&#xff0c;而 Spark Streaming 处理的是实时流数据。这些差异体现在任务的调度、执行、容错、数据处理模式等方面。 接下来&#xff0c;我们将从底层原理和源…...

Git提示信息 Pulling is not possible because you have unmerged files.

git [fatal] hint: Pulling is not possible because you have unmerged files.hint: Fix them up in the … error: Pulling is not possible because you have unmerged files. 错误:无法提取&#xff0c;因为您有未合并的文件。 hint: Fix them up in the work tree, and t…...

python编程开发“人机猜拳”游戏

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

丹摩智算平台部署 Llama 3.1:实践与体验

文章目录 前言部署前的准备创建实例 部署与配置 Llama 3.1使用心得总结 前言 在最近的开发工作中&#xff0c;我有机会体验了丹摩智算平台&#xff0c;部署并使用了 Llama 3.1 模型。在人工智能和大模型领域&#xff0c;Meta 推出的 Llama 3.1 已经成为了目前最受瞩目的开源模…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...