视频去水印前端界面布局

本文详细介绍了如何在微信小程序中实现视频去水印功能,包括主界面的输入与操作按钮设计,粘贴链接后的处理,解析步骤,以及下载无水印视频的过程,展示了从数据获取到保存到相册的完整流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文主要说一下视频去水印界面布局流程,拿微信小程序举例

1.主界面view部分,一个输入框,两个按钮,分别为粘贴和解析
<template>
	<view class="content">
		<view class="input">
			<uni-easyinput type="textarea" v-model="inputValue" placeholder="请输入抖音视频链接" @input="input"></uni-easyinput>
		</view>
		<view class="btn">
			<button @click="clickPaste">粘贴</button>
			<button class="analysis" @click="clickAnalysis">解析</button>
		</view>
	</view>
</template>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}

	.input {
		padding: 40rpx;
	}

	.btn {
		display: flex;
		justify-content: space-around;
		margin: 20rpx;

		button {
			width: 180rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.analysis {
			background-color: $uni-color-main;
			color: $uni-color-white;
		}
	}
</style>
2.点击粘贴后,对inputValue进行赋值
clickPaste() {
	var that = this
	uni.getClipboardData({
		success(res) {
			console.log("剪贴板获取", res.data);
			if (res.data) {
				that.inputValue = res.data
				console.log("inputValue", that.inputValue);
			}
		},
		fail() {
			console.log("粘贴失败");
		}
	})
}   
3.点击解析,调用解析接口,同时把相关数据传到视频播放界面

视频播放界面,显示标题,视频video,下载进度条和下载保存按钮

  • videoUrl是无水印视频地址
  • downloadProgress是下载进度,进度大于0时才显示
  • disabledFlag控制按钮是否可以点击,下载过程中按钮不可点击
<template>
	<view>
		<view class="video">
			<text>{{title}}</text>

			<video :src="videoUrl" autoplay="false" controls @error="videoErrorCallback"></video>
		</view>

		<view v-if="downloadProgress > 0" style="padding: 20rpx;">
			<progress :percent="downloadProgress" show-info activeColor="#007AFF" backgroundColor="#8A8A8A" />
		</view>

		<view class="btn">
			<button @click="clickDownload" :disabled="disabledFlag">下载并保存到相册</button>
		</view>
	</view>
</template>


<style lang="scss">
	.video {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;

		text {
			padding: 20rpx 30rpx;
			font-size: 30rpx;
			font-weight: 700;
		}
	}

	.btn {
		margin: 40rpx;

		button {
			background-color: $uni-color-main;
			color: $uni-color-white;
		}
	}
</style>
4.点击下载,调用系统下载方法,下载成功后调用保存方法,保存之前申请保存相册的权限
downloadVideo(downloadUrl) {
	var that = this

	const downloadTask = uni.downloadFile({
		url: downloadUrl,
		success: (res) => {
			that.disabledFlag = false
			if (res.statusCode === 200) {
				console.log('downloadFile', '下载成功: ' + res.tempFilePath);
				that.tempFilePath = res.tempFilePath

				that.saveVideoToPhotosAlbum()
			}

		},
		fail(res) {
			that.disabledFlag = false
		}
	});

	downloadTask.onProgressUpdate((res) => {
		that.disabledFlag = true
		that.downloadProgress = res.progress
	});
},
5.保存相册
saveVideoToPhotosAlbum() {
	var that = this
	uni.authorize({
		scope: 'scope.writePhotosAlbum',
		success() {
			console.log("writePhotosAlbum", '获取写入相册成功');
			uni.saveVideoToPhotosAlbum({
				filePath: that.tempFilePath,
				success(res) {
					uni.showToast({
						title: '保存成功'
					});
					console.log('saveVideoToPhotosAlbum', '保存成功: ' + res.errMsg);
				},
				fail(res) {
					uni.showToast({
						title: '保存失败'
					});
					console.log('saveVideoToPhotosAlbum', '保存失败: ' + res.errMsg);
				}
			})
		},
		fail() {
			console.log("writePhotosAlbum", '获取写入相册失败');
		}
	})
}

到这里一个简单的视频去水印流程就结束了,服务器去水印接口,大家可以留言交流

下面是我开发的去水印小程序,已经上线,大家可以扫码测试效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值