微信小程序?qū)崿F(xiàn)上傳視頻功能
本文實例為大家分享了微信小程序上傳視頻,供大家參考,具體內(nèi)容如下
微信開發(fā)者工具需要安裝ffmpeg環(huán)境才能正常使用下面的官方方法。
1、調(diào)用官方提供的方法(wx.chooseMedia)
choosevideo(){ ? ? let that=this ? ? console.log("上傳視頻的方法") ? ? wx.chooseMedia({ ? ? ? count: 1, ?//上傳視頻的個數(shù) ? ? ? 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 //獲取視頻超出限制大小的數(shù)量 ? ? ? ? ? ? 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、頁面中用標(biāo)簽將上傳的視頻顯示出來
<video ?src="{{sptemp}}" ></video>
3、效果展示
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript動態(tài)修改網(wǎng)頁元素內(nèi)容的方法
這篇文章主要介紹了JavaScript動態(tài)修改網(wǎng)頁元素內(nèi)容的方法,實例分析了javascript操作html元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03細(xì)數(shù)localStorage的用法及使用注意事項
這篇文章主要介紹了細(xì)數(shù)localStorage的用法及使用注意事項,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Bootstrap入門書籍之(五)導(dǎo)航條、分頁導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之(五)導(dǎo)航條、分頁導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02微信小程序 動態(tài)綁定數(shù)據(jù)及動態(tài)事件處理
這篇文章主要介紹了微信小程序 動態(tài)綁定數(shù)據(jù)及動態(tài)事件處理的相關(guān)資料,需要的朋友可以參考下2017-03-03