微信小程序短视频去水印解析

小程序体验

下载源码：源码下载

js

var services = require('../../lib/service')

var ReceiverOptions = null;
Page({
  data: {
    loading: false,
    videoInfo: {}, //{videoId:0,videourl:'',title:''}
    //0:加载完成(还有数据)  1:加载中  2:加载完成(没有更多数据了)
    searchLoadingStatus: 2,
    //1:已授权  0:未授权
    typeCode: 0,
    //搜索位置名称
    searchKeyWord: '',
    systemInfo: {},
    //视频下载状态 0:未下载  1:正在下载
    videoDownLoadStatus: 0,
    videoDownProgress: 0,
    videoPlayCoverList: [],
    //是否显示下载视频按钮
    showDownLoadBtn: false,
    //显示分享按钮
    showShareVideoBtn: false,
    //是否显示在线客服
    showOnlineKf: false,
    //积分总数
    creditsAmountSum: 0,
    //视频下载Url
    downLoadVideoUrl: '',
    //视频下载提示语
    downloadVideoWaitRemindText: '正在生成视频地址,请稍后...'
  },
  onLoad(options) {
    var that = this;

    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          systemInfo: res //windowWidth,windowHeight
        });
        console.log(res);
      }
    });
    getApp().getWxLoginInfo(function() {
      that.loadSupportPlat(true);
      that.videoSystemSetting();
    });
  },
  onShow() {
    var that = this;

    var userLoginStatus = getApp().globalData.UserInfo.UserLoginStatus;
    if (userLoginStatus) {
      that.loadSupportPlat(false);
    }
    wx.getClipboardData({
      success(res) {
        console.log(res.data);
        var linkStr = res.data;
        if (linkStr.indexOf('http:') >= 0 || linkStr.indexOf('https:') >= 0) {

          //清空剪切板内容
          wx.setClipboardData({
            data: ' ',
            success(clearRes) {
              wx.hideToast();
            }
          })

          wx.showModal({
            title: '是否粘贴剪切板中的链接地址',
            content: linkStr,
            success(res) {
              if (res.confirm) {
                that.setData({
                  searchKeyWord: linkStr
                });
              }
            }
          })

        }
      }
    })

    that.setData({
      searchLoadingStatus: 2
    });
  },
  loadSupportPlat: function(loading) {
    var that = this;

    services.service('minivideo/getplatlist', {
        "WxUserId": 0
      },
      function(res) {
        console.log(res);
        that.setData({
          videoPlayCoverList: res.data.Data
        });
      }, null, null, loading);
  },
  loadShareVideo: function() {
    let that = this;
    var videoId = that.data.videoInfo.videoId;

    //videoId = 10004;
    if (videoId > 0) {
      services.service('minivideo/getvideoinfo', {
          "WxUserId": 0,
          "VideoId": videoId
        },
        function(res) {
          console.log(res);
          if (res.data.Status) {

            var analysisStatus = res.data.Data.AnalysisStatus;
            var showDownLoadBtn = false;
            //下载成功,显示下载，分享按钮
            if (analysisStatus == 3) {
              showDownLoadBtn = true;
            }

            that.setData({
              downloadVideoWaitRemindText: '',
              showDownLoadBtn: showDownLoadBtn,
              showShareVideoBtn: true,
              videoInfo: {
                videoId: videoId,
                videourl: res.data.Data.VideoUrl
              },
              downLoadVideoUrl: res.data.Data.VideoUrl
            });
          }
        }, null, null, true);
    } else {

    }
  },
  //系统设置
  videoSystemSetting: function() {
    let that = this;

    services.service('minivideo/getconfig', {},
      function(res) {
        console.log(res);
        if (res.data.Status) {
          that.setData({
            showShareVideoBtn: res.data.Data.ShowShareVideo,
            showOnlineKf: res.data.Data.ShowOnlineKf
          });
        }
      }, null, null, false);
  },
  //保存视频到相册
  btnSaveVideo: function() {
    var that = this;
    wx.authorize({
      scope: "scope.writePhotosAlbum",
      success: function() {
        var downLoadStatus = that.data.videoDownLoadStatus;
        if (downLoadStatus == 0) {
          var videourl = that.data.downLoadVideoUrl;
          if (videourl == null || videourl == '') {
            that.showToast('请先提取视频');
            return;
          }

          that.setData({
            videoDownLoadStatus: 1,
            videoDownProgress: 0
          })
          const downloadTask = wx.downloadFile({
            url: videourl,
            success(res) {
              if (res.statusCode === 200) {
                wx.saveVideoToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success(res) {
                    //保存成功
                    that.showSuccessToast('已保存到相册');
                  },
                  fail(res) {
                    console.log(res);
                    that.showToast('保存失败');
                  }
                })
              }
            },
            fail(res) {
              that.showToast('下载视频失败');
            },
            complete(res) {
              that.setData({
                videoDownLoadStatus: 0
              })
            }
          })

          //监听下载进度
          downloadTask.onProgressUpdate(function(res) {
            that.setData({
              videoDownProgress: res.progress
            })
          })
        }
      },
      fail: function() {
        that.showToast('授权保存视频到相册失败,请删除该小程序重新授权');
      }
    });
  },
  //复制链接
  copyVideoLink: function() {
    var that = this;
    var videoUrl = that.data.videoInfo.videourl;

    wx.setClipboardData({
      data: videoUrl,
      success(res) {
        that.showToast('复制成功')
      }
    });
  },
  //搜索
  bindSearchTap: function(e) {
    console.log('开始提取视频')
    console.log(e);
    var that = this;
    var searchLoadingStatus = that.data.searchLoadingStatus;
    if (searchLoadingStatus != 1) {
      that.setData({
        //加载中
        searchLoadingStatus: 1
      });

      var _userInfo = e.detail.userInfo;
      if (_userInfo != null && _userInfo != undefined) {
        //先授权
        getApp().authorUserInfo(_userInfo, function(data) {
          that.getVideoPlayUrl();
        }, false);
      } else {
        that.showToast("请先允许微信授权");
        that.setData({
          //加载中
          searchLoadingStatus: 2
        });
      }
    }
  },
  //使用教程
  bindUseCourse: function(e) {
    wx.navigateTo({
      url: '../useCourse/useCourse'
    });
  },
  //跳转到位置收藏大师
  navigateToLocationMiniProgram: function(e) {
    var wxUserId = getApp().globalData.UserInfo.WxUserId;

    wx.navigateToMiniProgram({
      appId: 'wxb91f7b85c23f0624',
      path: 'pages/home/home?skip=' + wxUserId,
      //extraData: {
      //  flag: 'Skip_1'
      //},
      envVersion: 'release',
      success(res) {
        // 打开成功
      },
      fail(res) {
        that.showToast('调起小程序失败,请稍后重试');
      }
    })
  },
  //清空输入框
  clearInput: function() {
    var that = this;
    that.setData({
      searchKeyWord: ''
    });
  },
  //输入框输入监听
  searchInputMonitor: function(e) {
    var that = this;

    that.setData({
      searchKeyWord: e.detail.value
    });
  },
  //提取视频
  getVideoPlayUrl: function() {
    var that = this;
    that.startGetVideoPlayUrl();
  },
  startGetVideoPlayUrl: function() {
    var that = this;

    var wxUserId = getApp().globalData.UserInfo.WxUserId;
    var keyword = that.data.searchKeyWord;

    services.service('minivideo/addvideourl', {
        WxUserId: wxUserId,
        OriginalUrl: keyword,
        XcxTypeCode: 1
      },
      function(res) {
        if (res.data.Status) {
          var videoUrl = res.data.Data.VideoUrl;
          var videoRecordId = res.data.Data.VideoRecordId;
          var videoImgs = res.data.Data.Imgs;

          that.setData({
            videoInfo: {
              videoId: videoRecordId,
              videourl: videoUrl,
              title: '',
              imgs: videoImgs
            }
          });

          var needDownLoadToServer = res.data.Data.NeedDownLoadToServer;
          if (needDownLoadToServer) {
            if (videoUrl != null && videoUrl != '') {
              that.downLoadVideoToServer(wxUserId, videoUrl, videoRecordId);
            }
          } else {
            that.setData({
              downLoadVideoUrl: videoUrl,
              showDownLoadBtn: true
            });
          }
        } else {
          wx.showModal({
            content: res.data.Msg,
            showCancel: false
          })
        }
      }, null,
      function() {
        that.setData({
          //加载完成
          searchLoadingStatus: 2
        });
      })
  },
  //下载视频到服务器
  downLoadVideoToServer: function(wxUserId, videoUrl, videoRecordId) {
    var that = this;
    that.setData({
      showDownLoadBtn: false,
      downloadVideoWaitRemindText: '正在生成视频地址,请稍后...'
    });

    services.service('minivideo/downloadvideo', {
        "WxUserId": wxUserId,
        "VideoUrl": videoUrl,
        "VideoRecordId": videoRecordId
      },
      function(res) {
        if (res.data.Status) {
          var url = res.data.Data.Url;
          that.setData({
            downLoadVideoUrl: url,
            showDownLoadBtn: true
          });
        } else {
          that.showToast(res.data.Msg);
          that.setData({
            showDownLoadBtn: false,
            downloadVideoWaitRemindText: res.data.Msg
          });
        }
      }, null, null, false);
  },
  //如何获取更多次数
  getTimesMore: function() {
    wx.navigateTo({
      url: '../getTimesMore/getTimesMore'
    });
  },
  showToast(title) {
    wx.showToast({
      title: title,
      icon: 'none',
      duration: 2000
    })
  },
  onShareAppMessage: function(res) {
    let that = this;

    return {
      path: '/pages/home/home'
    }

  }
});

wxml

<view class="search" bindtap="suo">
  <!--<icon class="search-img" type="search" size="13" />-->
  <input class="search-ipt" value='{{searchKeyWord}}' type="text" bindinput="searchInputMonitor" placeholder="链接地址" placeholder-class="placeholder-color" />

  <view class="weui-icon-clear" bindtap="clearInput">
    <icon type="clear" size="23"></icon>
  </view>

  <!-- <text class="search-btn" bindtap="bindSearchTap">提取</text>-->
  <form bindsubmit="getFormId" report-submit="true">
    <button type="primary" class='search-analysis' bindgetuserinfo='bindSearchTap' open-type="getUserInfo">
      解析
    </button>
  </form>
</view>
<view class='support-remind'>
  <view class="clearfix"></view>
  <view class="content-attr clearfix"></view>
  <view class="flex-wrp">
    <block wx:for="{{videoPlayCoverList}}">
      <view style='width:48px;float:left;margin-left:20px'>
        <view style='text-align:center'>
          <image mode='aspectFit' style='width:35px;height:35px;' src='{{item.Icon}}'></image>
        </view>
        <view class='support-text-app'>
          <text>{{item.Name}}</text>
        </view>
      </view>
    </block>
  </view>
  <view class="content-attr clearfix"></view>
</view>
<view class="clearfix"></view>
<!--视频区域-->
<block wx:if='{{videoInfo.videourl!=null && videoInfo.videourl!=""}}'>
  <view class="order-cell">
    <!--cell-status clearfix-->
    <view class="">
      <text>{{videoInfo.title}}</text>
    </view>
    <video id="myVideo" autoplay="true" style='width:{{systemInfo.windowWidth-20}}px;height:{{VideoHeight}}px;margin-left:10px;margin-right:10px;' src="{{videoInfo.videourl}}"></video>
    <view class="clearfix"></view>
    <view wx:if="{{!showDownLoadBtn}}" class='videoUrlWaitRemind'>
      {{downloadVideoWaitRemindText}}
    </view>
    <button type="primary" bindtap="btnSaveVideo" class='videoDownShareLeft' wx:if="{{showDownLoadBtn}}">
      <block wx:if="{{videoDownLoadStatus==0}}">
        <text>下载视频</text>
      </block>
      <block wx:else>
        <text>正在下载({{videoDownProgress}}%)</text>
      </block>
    </button>
    <button type="warn" bindtap="copyVideoLink" class='videoDownShareRight'>
      <block>
        <text>复制链接</text>
      </block>
    </button>
  </view>
</block>

<view style='margin-top:20px;'>
  <view class='useCourse' bindtap="bindUseCourse">
    教程
  </view>
  <button class='contactService' open-type="contact" wx:if="{{showOnlineKf}}">
    <view>
      客服
    </view>
  </button>
  <button class='shareXcx' open-type="share" wx:if="{{showShareVideoBtn}}">
    <view>
      分享
    </view>
  </button>
</view>
<view class="clearfix"></view>
<view class='clsGetTimesWay' bindtap="getTimesMore" style='width:{{systemInfo.windowWidth-20}}px;height:200rpx;margin-left:10px;margin-right:10px;'>
  <view style='float:left;width:{{systemInfo.windowWidth-20-70}}px;'>
    <view class='clsGetTimesWayText'>如何获取更多次数？</view>
    <view class='clsGetTimesWayRemind'>转发邀请好友</view>
    <view class='clsGetTimesWaySee'>查看>></view>
  </view>
  <view style='float:left'>
    <image style='width:64px;height:64px;margin-top:10px;' src='/images/times2.png'></image>
  </view>
</view>
<view class="clearfix"></view>