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

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 = thisuni.getClipboardData({success(res) {console.log("剪貼板獲取", res.data);if (res.data) {that.inputValue = res.dataconsole.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 = 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", '獲取寫入相冊失敗');}}) }

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。