当前位置: 首页 > 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使用…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要 神经影像技术对医学科学产生了深远的影响&#xff0c;推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下&#xff0c;基于神经血管耦合现象的多模态神经影像方法&#xff0c;通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里&#xff0c;本研…...