本文主要说一下视频去水印界面布局流程,拿微信小程序举例
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", '获取写入相册失败');
}
})
}
到这里一个简单的视频去水印流程就结束了,服务器去水印接口,大家可以留言交流
下面是我开发的去水印小程序,已经上线,大家可以扫码测试效果