Uniapp + VUE3.0 实现双向滑块视频裁剪效果

 效果图

<template><view v-if="info" class="all"><video:src="info.videoUrl"class="video" id="video" :controls="true" object-fit="fill" :show-fullscreen-btn="false"play-btn-position="center":autoplay="true" @loadedmetadata="loadedMetadata"></video><view class="slider"><view class="thumb-left" @touchmove="e=>handleTouchMove(e,0)" @touchend="e=>handleTouchEnd(e,0)":style="` margin-left: ${thumbLeft}px;`">{{ start }}</view><view class="slider-bg"></view><view class="thumb-right" @touchmove="e=>handleTouchMove(e,1)" @touchend="e=>handleTouchEnd(e,1)":style="` margin-right: ${thumbRight}px;`">{{ end }}</view></view></view></template><script lang="ts" setup>
const videoInfo = defineProps(["info"])
const emit = defineEmits(['onChange'])
import {ref, computed, onMounted, getCurrentInstance} from "vue";
import {onReady,
} from "@dcloudio/uni-app"const min = ref(0)
const max = ref(0)
const minInterval = ref(15)//最小裁剪间隔
const thumbLeft = ref(0)
const thumbRight = ref(0)
const start = ref(computed(() => {return Math.round((thumbLeft.value) * rate.value)
}))
const end = ref(computed(() => {return Math.round((totalWidth.value - thumbRight.value) * rate.value)
}))const rate = ref(computed(() => {return max.value / totalWidth.value
}))
const interval = ref(computed(() => {return minInterval.value / rate.value
}))const instance = getCurrentInstance()
const thumbLeftSize = ref({width: 0,height: 0,left: 0,right: 0
})
const thumbRightSize = ref({width: 0,height: 0,left: 0,right: 0
})
let dxLeft = 0
let dxRight = 0
const totalWidth = ref(0)
const videoTotalDuration = ref(0)
let videoContext: UniApp.VideoContext = null
let windowWidth = 0
let timer: number = nullfunction loadedMetadata(e) {max.value = Math.floor(e.detail.duration)emit('onChange', {start: start.value, end: end.value})
}onReady(() => {videoContext = uni.createVideoContext('video', instance);windowWidth = uni.getSystemInfoSync().windowWidth
})
onMounted(() => {uni.createSelectorQuery().in(instance).select('.thumb-left').boundingClientRect(data => {console.log(data)thumbLeftSize.value = dataconsole.log(thumbLeftSize.value)}).exec();uni.createSelectorQuery().in(instance).select('.thumb-right').boundingClientRect(data => {console.log(data)thumbRightSize.value = dataconsole.log(thumbRightSize.value)totalWidth.value = thumbRightSize.value.right - thumbLeftSize.value.left - 2 * thumbLeftSize.value.width}).exec();
});function handleTouchMove(e, index: Number) {let pageX = e.touches[0].pageXif (index == 0) {//左边边viewdxLeft = Math.max(pageX - thumbLeftSize.value.left, 0)//修正if (dxLeft + dxRight + interval.value > totalWidth.value) {dxLeft = totalWidth.value - dxRight}console.log("pageX:" + pageX, "dxRight:" + dxRight, "dxLeft:" + dxLeft, "thumbRight:" + thumbRight.value, "thumbLeft:" + thumbLeft.value, "width:" + thumbLeftSize.value.width, "windowWidth:" + windowWidth, thumbRightSize.value.right, "totalWidth:" + totalWidth.value)if (dxLeft <= interval.value) {//左边边界thumbLeft.value = 0return}if (dxRight + dxLeft + interval.value > totalWidth.value) {thumbLeft.value = windowWidth - thumbRight.value - 2 * thumbLeftSize.value.width - 2 * thumbLeftSize.value.left - interval.value} else {thumbLeft.value = dxLeft - interval.value}} else {//右边viewdxRight = Math.max(windowWidth - pageX - thumbRightSize.value.width, 0)//修正if (dxRight + dxLeft + interval.value > totalWidth.value) {dxRight = totalWidth.value - dxLeft}console.log("pageX:" + pageX, "dxRight:" + dxRight, "dxLeft:" + dxLeft, "thumbRight:" + thumbRight.value, "thumbLeft:" + thumbLeft.value, "width:" + thumbLeftSize.value.width, "windowWidth:" + windowWidth, thumbRightSize.value.right, "totalWidth:" + totalWidth.value)if (dxRight <= interval.value) {//右边边界thumbRight.value = 0return}if (dxRight + dxLeft + interval.value > totalWidth.value) {//左边边界修正thumbRight.value = windowWidth - thumbLeft.value - 2 * thumbLeftSize.value.width - 2 * thumbLeftSize.value.left - interval.value} else {thumbRight.value = dxRight - interval.value}}}function handleTouchEnd(e, index: Number) {emit('onChange', {start: start.value, end: end.value})videoContext.seek(index == 0 ? start.value : end.value);videoContext.play();
}
</script><style lang="scss" scoped>
.all {margin-left: 25rpx;margin-right: 25rpx;.video {height: 400rpx;width: 100%;}.slider {display: flex;color: white;flex-direction: row;height: 100rpx;.thumb-left {width: 50rpx;height: 100%;color: black;display: flex;font-size: 12rpx;align-items: center;justify-content: center;background-color: #8EFB7C;border-top-left-radius: 20rpx;border-bottom-left-radius: 20rpx;}.slider-bg {display: flex;flex: 1;background-color: #F1FFF0}.thumb-right {width: 50rpx;height: 100%;color: black;display: flex;font-size: 12rpx;align-items: center;justify-content: center;background-color: #8EFB7C;border-top-right-radius: 20rpx;border-bottom-right-radius: 20rpx;}}
}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网页数据的解析提取(parsel的使用)

前面&#xff0c;我们已经介绍了Xpath库和Beautiful Soup库&#xff08;支持css选择器&#xff09;来提取页面信息。它们有各自的优缺点&#xff0c;那可不可以取长补短呢&#xff1f;当然可以&#xff0c;parsel库就是结合Xpath和css选择器两种方式来提取网页信息。同时&#…

sylar高性能服务器-日志(P30-P35)内容记录

文章目录 P30-P32&#xff1a;协程调度01-03一、Scheduler局部变量FiberAndThread&#xff08;任务结构体&#xff09;成员变量调度协程构造函数析构函数startstoprunstopping 二、参考资料 P33-P35&#xff1a;协程调度04-06一、测试1二、测试2 总结 P30-P32&#xff1a;协程调…

开源博客项目Blog .NET Core源码学习(9:Autofac使用浅析)

开源博客项目Blog使用Autofac注册并管理组件和服务&#xff0c;Autofac是面向.net 的开源IOC容器&#xff0c;支持通过接口、实例、程序集等方式注册组件和服务&#xff0c;同时支持属性注入、方法注入等注入方式。本文学习并记录Blog项目中Autofac的使用方式。   整个Blog解…

Swift基础知识:28.Swift协议

在 Swift 中&#xff0c;协议&#xff08;protocol&#xff09;是一种定义方法、属性和其他特定任务的蓝图。类、结构体或枚举可以遵循&#xff08;adopt&#xff09;协议&#xff0c;从而提供所需的功能。协议定义了一组要求&#xff0c;遵循协议的类型需要提供对应的功能实现…

LED景观照明灯驱动电路串联、并联和恒流3款方案

LED景观照明灯是现代城市照明中常见的一种灯具。为了保证LED景观照明灯的正常工作&#xff0c;需要设计合适的驱动电路。LED景观照明灯的驱动电路可以采用串联、并联或恒流的方式来设计。 首先&#xff0c;串联驱动电路是指将多个LED灯串联在一起&#xff0c;然后接入电源进行…

【Spring】常见问题总结

目录 1. 什么是 Spring 框架? 2. 列举一些重要的Spring模块&#xff1f; 3. RestController vs Controller 4. Spring IOC & AOP 4.1 谈谈自己对于 Spring IoC 和 AOP 的理解 IoC AOP 4.2 Spring AOP 和 AspectJ AOP 有什么区别&#xff1f; 5. Spring bean 5.1…

C语言第二十九弹---浮点数在内存中的存储

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、浮点数在内存中的存储 1.1、练习 1.2、浮点数怎么转化为二进制 1.3、浮点数的存储 1.3.1、浮点数存的过程 1.3.2、浮点数取的过程 1.3、题目解析…

FPGA领域顶级学术会议

FPGA领域顶级学术会议主要有FPGA,FCCM,FPL和FPT。 1 FPGA 会议全名是: ACM/SIGDA International Symposium on Field-Programmable Gate Arrays 网站是:https://dl.acm.org/conference/fpga FPGA常年在美国举办,每年2月,偏FPGA基础研究; 该会议的论文免费下载。这个比…

【MATLAB源码-第144期】基于matlab的蝴蝶优化算法(BOA)无人机三维路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 ​蝴蝶优化算法&#xff08;Butterfly Optimization Algorithm, BOA&#xff09;是基于蝴蝶觅食行为的一种新颖的群体智能算法。它通过模拟蝴蝶个体在寻找食物过程中的嗅觉导向行为以及随机飞行行为&#xff0c;来探索解空间…

vue3前端项目开发,具备纯天然的防止爬虫采集的特征

vue3前端项目开发,具备纯天然的防止爬虫采集的特征&#xff01;众所周知&#xff0c;网络爬虫可以在网上爬取到一些数据&#xff0c;很多公司&#xff0c;为了自己公司的数据安全&#xff0c; 尤其是web端项目&#xff0c;不希望被爬虫采集。那么&#xff0c;您可以使用vue技术…

spark ui的job数,stage数以及task数

背景 我们在查看spark ui的界面时&#xff0c;一段spark sql的执行经常看到会有对应有几个job&#xff0c;然后每个job又有几个stage&#xff0c;而每个stage又有好多个task&#xff0c;那么这些job,stage,task是怎么和spark 算子对应的呢 算子和job数,stage数以及task数的对…

代码随想录算法训练营29期|day59 任务以及具体安排

第九章 动态规划part16 583. 两个字符串的删除操作 // dp数组中存储word1和word2最长相同子序列的长度 class Solution {public int minDistance(String word1, String word2) {int len1 word1.length();int len2 word2.length();int[][] dp new int[len1 1][len2 1];for …

Gartner信息图:2024 年44种安全和风险管理技术采用路线图

Gartner发布的该信息图确定了全球企业正在采用的 44 种安全相关技术&#xff0c;并根据采用阶段、部署风险和企业价值对它们进行了映射。安全和风险管理领导者可以使用此信息图将他们的技术投资与同行进行比较。 2024 年安全和风险管理技术采用路线图 SRM 领导者可以使用此信息…

世微AP8P059 静态功耗小 太阳能人体红外线感应IC

概述 AP8P059 是一款集成低压 LDO 、光 控、充电控制、过充保护、欠压保护、 PIR 感应、延时为一体的人体感应太阳能 LED 灯控制芯片&#xff0c;只需要很少的外接元件&#xff0c;适 用于锂电池供电的 PIR 人体感应 LED 灯具 的应用。 外置的一级带通增益放大 器便…

Python实现视频转音频、音频转文本的最佳方法

文章目录 Python实现视频转音频和音频转文字视频转音频步骤 1&#xff1a;导入moviepy库步骤 2&#xff1a;选择视频文件步骤 3&#xff1a;创建VideoFileClip对象步骤 4&#xff1a;提取音频步骤 5&#xff1a;保存音频文件 音频转文字步骤 1&#xff1a;导入SpeechRecognitio…

RV新闻概要 --- 2024/02/23

来源&#xff1a;https://mp.weixin.qq.com/s/EEJVLQnXvgQTbtU_yrW9lw 晶心科技是一家上市公司&#xff08;TWSE&#xff1a;6533&#xff1b;SIN&#xff1a;US03420C2089&#xff1b;ISIN&#xff1a;US03420C1099&#xff09;&#xff0c;已有18 年的经营历史&#xff0c;是…

单向循环链表的操作

main函数&#xff1a; #ifndef __loopLinkList_H__#define __loopLinkList_H__typedef int datatype;union msg{ //若数据的类型也为int&#xff0c;则不需要这个联合体datatype data;int len; //放头结点&#xff0c;记录链表长度};typedef struct node{union msg te…

Istio实战:Istio Kiali部署与验证

目录 前言一、Istio安装小插曲 注意事项 二、Kiali安装三、Istio测试参考资料 前言 前几天我就开始捣腾Istio。前几天在执行istioctl install --set profiledemo -y 的时候老是在第二步就报错了&#xff0c;开始我用的istio版本是1.6.8。 后面查看k8s与istio的版本对应关系后发…

vCenter、vSphere Client硬盘扩容详解

文章目录 1、需求2、vSphere 操作流程3、服务器操作3.1、查看分区空间大小3.2、列出所有可用块设备的信息3.3、新建分区3.4、重读分区表信息3.5、格式化分区信息3.6、查看卷组的详细状态3.7、创建物理卷3.8、扩容卷组3.9、逻辑卷在线扩容3.10、显示物理卷属性3.11、XFS 文件系统…

最少停车数(C 语言)

题目描述 特定大小的停车场&#xff0c;数组cars[]表示&#xff0c;其中1表示有车&#xff0c;0表示没车。车辆大小不一&#xff0c;小车占一个车位&#xff08;长度1&#xff09;&#xff0c;货车占两个车位&#xff08;长度2&#xff09;&#xff0c;卡车占三个车位&#xf…