微信小程序實現上傳視頻功能
本文實例為大傢分享瞭微信小程序上傳視頻，供大傢參考，具體內容如下
微信開發者工具需要安裝ffmpeg環境才能正常使用下面的官方方法。
1、調用官方提供的方法(wx.chooseMedia)
choosevideo(){
let that=this
console.log("上傳視頻的方法")
wx.chooseMedia({
count: 1, //上傳視頻的個數
mediaType:['video'], //限制上傳的類型為video
sourceType:['album', 'camera'], //視頻選擇來源
maxDuration: 58, //拍攝限制時間
camera: 'back', //采用後置攝像頭
success:function(res){
//獲取臨時存放的視頻資源
let tempFilePath=res.tempFiles[0].tempFilePath
//獲取該視頻的播放時間
let duration=res.tempFiles[0].duration
console.log("視頻播放時間為"+duration)
//獲取視頻的大小(MB單位)
let size=parseFloat(res.tempFiles[0].size/1024/1024).toFixed(1)
console.log("視頻大小為"+size)
//獲取視頻的高度
let height=res.tempFiles[0].height
console.log("視頻高度為"+height)
//獲取視頻的寬度
let width=res.tempFiles[0].width
console.log("視頻寬度為"+width)
//校驗大小後，符合進行上傳
if(size>20){
let beyongSize=size-20 //獲取視頻超出限制大小的數量
Toast("上傳的視頻大小超限,超出"+beyongSize+"MB,請重新上傳！")
return
}else{
//符合大小限制，進行上傳
console.log("開始上傳！！！")
that.uploadvideo({
url: api.uploadfiletofastdfs, //視頻上傳的接口
path: tempFilePath, //選取的視頻資源臨時地址
});
}
},
})
},
//視頻上傳
uploadvideo: function (data) {
wx.showLoading({
title: '上傳中...',
mask: true,
})
var that = this
// 視頻壓縮
wx.compressVideo({
quality: 'high',
src: data.path,
success:function(res){
let size=parseFloat(res.size/1024/1024).toFixed(1)
console.log("壓縮後視頻大小為"+size)
that.setData({
sptemp:res.tempFilePath
})
//上傳視頻
wx.uploadFile({
url: data.url,
filePath: res.tempFilePath,
name: 'uploadFile',
header: {
"X-Access-Token":wx.getStorageSync('token')
},
success: (resp) => {
wx.hideLoading();
//獲取fastDFS返回的存儲路徑
console.log(resp)
},
});
},
})
},
2、頁面中用標簽將上傳的視頻顯示出來
<video src="{{sptemp}}" ></video>
3、效果展示
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。