本文主要說一下視頻去水印界面布局流程，拿微信小程序舉例

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進(jìn)行賦值

clickPaste() {var that = thisuni.getClipboardData({success(res) {console.log("剪貼板獲取", res.data);if (res.data) {that.inputValue = res.dataconsole.log("inputValue", that.inputValue);}},fail() {console.log("粘貼失敗");}}) }

3.點擊解析，調(diào)用解析接口，同時把相關(guān)數(shù)據(jù)傳到視頻播放界面

視頻播放界面，顯示標(biāo)題，視頻video，下載進(jìn)度條和下載保存按鈕

• videoUrl是無水印視頻地址
• downloadProgress是下載進(jìn)度，進(jìn)度大于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.點擊下載，調(diào)用系統(tǒng)下載方法，下載成功后調(diào)用保存方法，保存之前申請保存相冊的權(quán)限

downloadVideo(downloadUrl) {var that = thisconst downloadTask = uni.downloadFile({url: downloadUrl,success: (res) => {that.disabledFlag = falseif (res.statusCode === 200) {console.log('downloadFile', '下載成功: ' + res.tempFilePath);that.tempFilePath = res.tempFilePaththat.saveVideoToPhotosAlbum()}},fail(res) {that.disabledFlag = false}});downloadTask.onProgressUpdate((res) => {that.disabledFlag = truethat.downloadProgress = res.progress}); },

5.保存相冊

saveVideoToPhotosAlbum() {var that = thisuni.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", '獲取寫入相冊失敗');}}) }

到這里一個簡單的視頻去水印流程就結(jié)束了，服務(wù)器去水印接口，大家可以留言交流

下面是我開發(fā)的去水印小程序，已經(jīng)上線，大家可以掃碼測試效果

總結(jié)

以上是生活随笔為你收集整理的视频去水印前端界面布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。