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

Uniapp 短视频去水印解析工具开发实现

最近搞了一个有意思的小工具——短视频去水印解析器!这玩意儿可以把短视频中的水印给抹掉,还能提取视频、封面等资源。整个项目用了 Uniapp 开发,做完后体验了一下,发现还挺顺手。今天就来跟大家聊聊实现思路和代码细节~

需求分析

我们的目标是做一个简单易用的小工具,支持以下功能:

  1. 输入短视频链接,识别并解析出视频内容。
  2. 展示视频信息:视频封面、作者信息、标题等。
  3. 下载和复制功能:可以方便地复制视频链接、封面链接和标题。

代码拆解与讲解

先来看代码的大体结构,我们把主要部分放在 <template><script> 里,当然还有一些样式细节。不要着急,我们会逐段剖析,干货满满~


页面模板部分 (<template>)

首先是页面的结构,用 Vue 的模板语法来布局。这里用了 uni-notice-bar 来放一些提醒,避免用户乱用这工具(你懂的,必要的免责声明)。

<uni-notice-bar:show-icon="true":scrollable="true":single="true"text="本工具仅供学习交流实用,请勿用于商业用途。"
></uni-notice-bar>

这段代码很简单,就是一个横幅通知条,提示用户“仅供学习用途”,毕竟,咱们要做个守法的好公民。

接下来是输入框、识别按钮、展示结果的区域:

<view class="input-section card"><input v-model="inputText"  placeholder="请输入文本" class="input-box" /><view class="button-group"><button class="action-button" @tap="clearText">清空</button><button class="action-button" @tap="extractLinks">识别</button></view>
</view>
  • input:绑定 v-model="inputText",获取用户输入的链接。
  • 按钮组:两个按钮,一个清空输入框,一个开始识别。

识别链接功能 (extractLinks 方法)

代码如下:

async extractLinks() {const urlPattern = /(https?:\/\/[^\s]+)/g;const links = this.inputText.match(urlPattern);if (links && links.length > 0) {this.extractedLinks = links;this.showNoLinkMessage = false;await this.fetchVideoData(links[0]);} else {this.extractedLinks = [];this.showNoLinkMessage = true;}
}
  1. 正则匹配链接:简单地通过正则表达式来识别用户输入中的 URL。
  2. 调用视频解析函数:识别到 URL 后,就调用 fetchVideoData,尝试解析视频信息。

请求视频解析接口 (fetchVideoData 方法)

通过接口请求获取视频信息,这里用了 uni.request 方法。

async fetchVideoData(link) {const encodedURL = encodeURIComponent(link);await uni.request({url: `${VideoParserAPI}?url=${encodedURL}`,method: 'GET',success: (response) => {if (response.data.code === 200) {this.data = response.data.data;} else {this.data = null;uni.showToast({ title: response.data.msg || '解析失败', icon: 'none' });}},fail: () => {this.data = null;uni.showToast({ title: '请求出错', icon: 'none' });}});
}
  • URL编码encodeURIComponent 确保链接传递正确。
  • 请求成功:如果 code === 200,则表示解析成功,数据就放在 this.data 里,后面展示就靠这个了。
  • 请求失败:不管啥原因,直接 uni.showToast 弹个错误提示就完事了。

视频播放与信息展示

解析成功后,我们会展示作者、标题、封面等信息,顺便整了个播放按钮。

<view class="card" v-if="data"><view class="author"><image :src="data.author.avatar" class="avatar"></image><text class="author-name">{{ data.author.name }}</text></view><text class="title">{{ data.title }}</text><image :src="data.cover_url" class="cover"></image><button class="play-button" @tap="playVideo">播放视频</button>
</view>
  • v-if="data":只有当 data 有内容时才显示。
  • 播放视频:点击按钮后 playVideo 方法会显示 <video> 标签,开始播放视频。
playVideo() {this.showVideo = true;
}

下载和复制功能

提供了几个按钮,可以让用户复制视频的标题、链接等信息。代码如下:

copyTitle() {if (this.data && this.data.title) {uni.setClipboardData({data: this.data.title,success: () => {uni.showToast({ title: '标题已复制', icon: 'success' });},fail: () => {uni.showToast({ title: '复制失败', icon: 'none' });}});}
}

其他按钮(如复制视频链接、复制封面链接)逻辑类似,就不赘述了。

样式与美化

页面的样式主要集中在 <style> 标签内,针对不同组件进行样式定义,比如 cardinput-boxbutton-group 等等。

.container {display: flex;flex-direction: column;align-items: center;padding: 20rpx;background-color: #f5f5f5;
}
.input-box {width: 100%;height: 60rpx;padding: 10rpx;border: 1px solid #ccc;border-radius: 10rpx;margin-bottom: 10rpx;
}
.action-button {width: 45%;height: 60rpx;background-color: #007aff;color: #fff;border-radius: 10rpx;
}

样式设计保持简洁,让用户可以愉快地使用,整个页面风格清新、简洁。

下面是效果展示:

在这里插入图片描述


总结

整个过程还是蛮顺畅的,主要是借助了 Uniapp 和现成的视频解析 API 来实现短视频去水印解析的核心功能。当然,代码中还是有一些细节需要注意,比如正则表达式的使用、接口请求的错误处理等。整个工具界面友好,操作简单,相信大家用起来会感觉不错!

代码其实也没啥复杂的地方,简单实用才是硬道理。希望大家喜欢这个工具,如果你有更好的优化建议,欢迎一起交流~

相关文章:

Uniapp 短视频去水印解析工具开发实现

最近搞了一个有意思的小工具——短视频去水印解析器&#xff01;这玩意儿可以把短视频中的水印给抹掉&#xff0c;还能提取视频、封面等资源。整个项目用了 Uniapp 开发&#xff0c;做完后体验了一下&#xff0c;发现还挺顺手。今天就来跟大家聊聊实现思路和代码细节~ 需求分析…...

计算机网络-八股-学习摘要

一&#xff1a;HTTP的基本概念 全称&#xff1a; 超文本传输协议 从三个方面介绍HTTP协议 1&#xff0c;超文本&#xff1a;我们先来理解「文本」&#xff0c;在互联网早期的时候只是简单的字符文字&#xff0c;但现在「文本」的涵义已经可以扩展为图片、视频、压缩包等&am…...

编程速递-庆祝Delphi诞生30周年!

庆祝Delphi 30周年纪念是一个特别的时刻。 回到1995年&#xff0c;也就是30年前&#xff0c;在微软Windows和互联网时代的曙光初现之时&#xff0c;Borland Delphi的创建者们无法想象&#xff0c;当时使用Borland Delphi构建的应用程序至今仍在运行——为全世界数十亿人服务。…...

每天五分钟深度学习框架pytorch:搭建谷歌的Inception网络模块

本文重点 前面我们学习了VGG,从现在开始我们将学习谷歌公司推出的GoogLeNet。当年ImageNet竞赛的第二名是VGG,而第一名就是GoogLeNet,它的模型设计拥有很多的技巧,这个model证明了一件事:用更多的卷积,更深的层次可以得到更好的结构 GoogLeNet的网络结构 如图所示就是Go…...

性能测试流程、主流性能工具

性能测试流程 性能测试流程 测试测试需求分析 性能测试计划和方案 测什么&#xff1a; 测试背景 测试目的 测试范围 谁来测&#xff1a; 进度和分工 交付清单 怎么测&#xff1a; 测试策略 性能测试用例设计 性能测试测试执行 性能分析和调优 性能测试报告 测试报告是…...

DeepSeek4j 已开源,支持思维链,自定义参数,Spring Boot Starter 轻松集成,快速入门!建议收藏

DeepSeek4j Spring Boot Starter 快速入门 简介 DeepSeek4j 是一个专为 Spring Boot 设计的 AI 能力集成启动器&#xff0c;可快速接入 DeepSeek 大模型服务。通过简洁的配置和易用的 API&#xff0c;开发者可轻松实现对话交互功能。 环境要求 JDK 8Spring Boot 2.7Maven/Gr…...

无耳科技 Solon v3.0.8 发布,Java 企业级应用开发框架

Solon 框架&#xff01; Solon 是新一代&#xff0c;Java 企业级应用开发框架。是杭州无耳科技有限公司的“根级”开源项目&#xff08;最近“杭州六小龙”很火啊&#xff0c;我们也是杭州的哦&#xff09;。从零开始构建&#xff08;No Spring、No Java-EE、No Servlet&#…...

【吾爱出品】针对红警之类老游戏适用WIN10和11的补丁cnc-ddraw7.1汉化版

针对红警之类老游戏适用WIN10和11的补丁cnc-ddraw7.1汉化版 链接&#xff1a;https://pan.xunlei.com/s/VOJ8PZd4avMubnDzHQAeZDxWA1?pwdnjwm# 直接复制到游戏安装目录&#xff0c;保持与游戏主程序同目录下。...

使用 playwright 自定义 js 下载的路径和文件名

遇到一个问题&#xff0c;点击按钮自动下载文件&#xff0c;路径和文件名都不能自定义&#xff0c;可以用 playwright 来解决这个问题 from playwright.sync_api import sync_playwright import os import time class ExcelDownloader: def __init__(self, download_pat…...

Kafka分区管理大师指南:扩容、均衡、迁移与限流全解析

#作者&#xff1a;孙德新 文章目录 分区分配操作(kafka-reassign-partitions.sh)1.1 分区扩容、数据均衡、迁移(kafka-reassign-partitions.sh)1.2、修改topic分区partition的副本数&#xff08;扩缩容副本&#xff09;1.3、Partition Reassign场景限流1.4、节点内副本移动到不…...

3.从零开始学会Vue--{{生命周期,工程化,组件化}}

1.生命周期钩子 1.是什么 生命周期 概念&#xff1a;就是一个Vue实例从创建 到 销毁 的整个过程 生命周期包括&#xff1a;① 创建 ② 挂载 ③ 更新 ④ 销毁 四个阶段 1.创建阶段&#xff1a;创建响应式数据 2.挂载阶段&#xff1a;渲染模板 3.更新阶段&#xff1a;修改…...

Python--网络编程

3. 网络编程与Socket 3.1 Socket基础 创建Socket import socket# TCP Socket tcp_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM)# UDP Socket udp_socket socket.socket(socket.AF_INET, socket.SOCK_DGRAM)服务器端函数 函数描述​bind((host, port))​绑定…...

【java】方法的基本内存原理(栈和堆)

java内存主要分为栈和堆&#xff0c;方法相关的部分主要在栈内存里&#xff0c;每个方法调用时会在栈里创建一个栈帧&#xff0c;存放局部变量和方法执行的信息。执行完后栈帧被销毁&#xff0c;局部变量消失。而对象实例存在堆里&#xff0c;由垃圾回收器管理。 **Java方法内…...

SQLMesh 系列教程4- 详解模型特点及模型类型

SQLMesh 作为一款强大的数据建模工具&#xff0c;以其灵活的模型设计和高效的增量处理能力脱颖而出。本文将详细介绍 SQLMesh 模型的特点和类型&#xff0c;帮助读者快速了解其强大功能。我们将深入探讨不同模型类型&#xff08;如增量模型、全量模型、SCD Type 2 等&#xff0…...

SpringBoot(接受参数相关注解)

文章目录 1.基本介绍2.PathVariable 路径参数获取信息 1.代码实例 1.index.html2.ParameterController.java3.测试 2.细节说明 3.RequestHeader 请求头获取信息 1.代码实例 1.index.html2.ParameterController.java3.测试 2.细节说明 4.RequestParameter 请求获取参数信息 1.…...

hbase合并队列超长问题分析

问题现象 hbase集群合并队列超长,有节点上合并任务已经运行超过1天未结束,合并队列总长不断增加。 问题分析 参数配置: 配置参数默认值含义hbase.hregion.memstore.flush.size128MMemStore达到该值会Flush成StoreFilehbase.hregion.memstore.block.multiplier4当region中…...

FPGA的星辰大海

编者按 时下风头正盛的DeepSeek,正值喜好宏大叙事的米国大统领二次上岗就业,OpenAI、软银、甲骨文等宣布投资高达5000亿美元“星际之门”之际,对比尤为强烈。 某种程度上,,是低成本创新理念的直接落地。 包括来自开源社区的诸多赞誉是,并非体现技术有多“超越”,而是…...

认识vue-admin

认识vue-admin **核心交付:** 为什么要基于现成架子二次开发 什么是二次开发&#xff1a;基于已有的代码&#xff08;项目工程&#xff0c;脚手架&#xff09;开进行新功能的开发 所以看懂已有的框架中的既有代码&#xff0c;变得很重要了 1. 背景知识 后台管理系统是一种最…...

STM32、GD32驱动TM1640原理图、源码分享

一、原理图分享 二、源码分享 /************************************************* * copyright: * author:Xupeng * date:2024-07-18 * description: **************************************************/ #include "smg.h"#define DBG_TAG "smg&…...

spring boot 对接aws 的S3 服务,实现上传和查询

1.aws S3介绍 AWS S3&#xff08;Amazon Simple Storage Service&#xff09;是亚马逊提供的一种对象存储服务&#xff0c;旨在提供可扩展、高可用性和安全的数据存储解决方案。以下是AWS S3的一些主要特点和功能&#xff1a; 1.1. 对象存储 对象存储模型&#xff1a;S3使用…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...