视频去水印前端界面布局

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

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", '获取写入相册失败');
		}
	})
}

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

下面是我开发的去水印小程序，已经上线，大家可以扫码测试效果