当前位置: 首页 > 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 已经成为了目前最受瞩目的开源模…...

机器视觉中的坐标系转换:从像素到世界的无缝衔接

1. 机器视觉中的坐标系基础概念 第一次接触机器视觉时&#xff0c;最让我困惑的就是各种坐标系之间的关系。记得当时调试工业相机时&#xff0c;明明在图像上看到了目标物体&#xff0c;但机械臂就是抓不准位置。后来才发现&#xff0c;问题出在没有正确理解像素坐标系和世界坐…...

Android开发避坑指南:RecyclerView最后一行被截断的5种原因及对应解决方案

Android开发避坑指南&#xff1a;RecyclerView最后一行被截断的5种原因及对应解决方案 在Android应用开发中&#xff0c;RecyclerView作为列表展示的核心组件&#xff0c;其灵活性和高性能深受开发者喜爱。然而&#xff0c;在实际项目中&#xff0c;我们经常会遇到一个令人头疼…...

别再乱放菜单了!SolidWorks插件UI设计避坑指南:C#二次开发中13个菜单位置的正确用法

SolidWorks插件UI设计黄金法则&#xff1a;C#二次开发中的13个菜单位置实战解析 当你的SolidWorks插件功能越来越丰富&#xff0c;是否遇到过这样的尴尬&#xff1a;用户反馈"功能藏得太深"、"操作路径太长"&#xff1f;这往往不是功能本身的问题&#xff…...

Linux原生B站客户端:突破平台限制的深度体验指南

Linux原生B站客户端&#xff1a;突破平台限制的深度体验指南 【免费下载链接】bilibili-linux 基于哔哩哔哩官方客户端移植的Linux版本 支持漫游 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-linux 对于Linux用户来说&#xff0c;在开源生态中寻找优质的视频…...

告别重启:深入解析NVML驱动/库版本不匹配的根源与动态修复

1. 当NVML罢工时&#xff1a;理解"Driver/library version mismatch"的本质 那天深夜&#xff0c;我正在调试一个CUDA计算任务&#xff0c;突然发现nvidia-smi命令返回了令人心碎的报错&#xff1a;"Failed to initialize NVML: Driver/library version mismatc…...

CosyVoice CPU部署实战:如何优化AI语音模型的推理速度

最近在做一个智能客服项目&#xff0c;需要把语音合成模型部署到一些只有CPU的服务器上。一开始直接用PyTorch加载CosyVoice模型&#xff0c;那个推理速度真是让人着急&#xff0c;生成一句话要等好几秒&#xff0c;完全没法满足实时交互的需求。这让我下定决心&#xff0c;必须…...

LobeChat效果对比:开源框架与官方ChatGPT的对话体验

LobeChat效果对比&#xff1a;开源框架与官方ChatGPT的对话体验 1. 引言&#xff1a;为什么需要对比开源与官方方案&#xff1f; 在AI聊天机器人领域&#xff0c;开发者常常面临一个关键选择&#xff1a;使用官方提供的ChatGPT服务&#xff0c;还是部署开源框架自行搭建&…...

ThinkPad双风扇深度解析:TPFanCtrl2实战配置与性能优化指南

ThinkPad双风扇深度解析&#xff1a;TPFanCtrl2实战配置与性能优化指南 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 TPFanCtrl2是一款专为ThinkPad双风扇机型设计的…...

Ostrakon-VL-8B模型压缩实践:在有限显存下的部署与推理

Ostrakon-VL-8B模型压缩实践&#xff1a;在有限显存下的部署与推理 你是不是也遇到过这样的情况&#xff1a;好不容易找到一个功能强大的视觉语言大模型&#xff0c;比如最近挺火的Ostrakon-VL-8B&#xff0c;结果一看显存要求&#xff0c;直接傻眼了——动辄需要几十个G的显存…...

快速体验语义搜索:用Qwen3-Embedding-4B搭建个人知识库

快速体验语义搜索&#xff1a;用Qwen3-Embedding-4B搭建个人知识库 1. 认识Qwen3-Embedding-4B&#xff1a;你的智能语义理解助手 想象一下&#xff0c;你有一个能理解各种语言、能记住海量文档内容、还能帮你快速找到相关信息的智能助手。这就是Qwen3-Embedding-4B能为你做的…...