微信小程序?qū)崿F(xiàn)上傳視頻功能
本文實(shí)例為大家分享了微信小程序上傳視頻,供大家參考,具體內(nèi)容如下
微信開發(fā)者工具需要安裝ffmpeg環(huán)境才能正常使用下面的官方方法。
1、調(diào)用官方提供的方法(wx.chooseMedia)
choosevideo(){
? ? let that=this
? ? console.log("上傳視頻的方法")
? ? wx.chooseMedia({
? ? ? count: 1, ?//上傳視頻的個(gè)數(shù)
? ? ? mediaType:['video'], ?//限制上傳的類型為video
? ? ? sourceType:['album', 'camera'], //視頻選擇來(lái)源
? ? ? maxDuration: 58, //拍攝限制時(shí)間
? ? ? camera: 'back', ?//采用后置攝像頭
? ? ? success:function(res){
? ? ? ? //獲取臨時(shí)存放的視頻資源
? ? ? ? let tempFilePath=res.tempFiles[0].tempFilePath
? ? ? ? //獲取該視頻的播放時(shí)間
? ? ? ? let duration=res.tempFiles[0].duration
? ? ? ? console.log("視頻播放時(shí)間為"+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)
? ? ? ? //校驗(yàn)大小后,符合進(jìn)行上傳
? ? ? ? if(size>20){
? ? ? ? ? ? let beyongSize=size-20 //獲取視頻超出限制大小的數(shù)量
? ? ? ? ? ? Toast("上傳的視頻大小超限,超出"+beyongSize+"MB,請(qǐng)重新上傳!")
? ? ? ? ? ? return
? ? ? ? }else{
? ? ? ? ? //符合大小限制,進(jìn)行上傳
? ? ? ? ? console.log("開始上傳?。。?)
? ? ? ? ? that.uploadvideo({
? ? ? ? ? ? url: api.uploadfiletofastdfs, //視頻上傳的接口
? ? ? ? ? ? path: tempFilePath, //選取的視頻資源臨時(shí)地址
? ? ? ? ? });
? ? ? ? }
? ? ? },
? ? })
? },
?//視頻上傳
? ? 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返回的存儲(chǔ)路徑
? ? ? ? ? ? ? console.log(resp)
? ? ? ? ? ? },
? ? ? ? ? });
? ? ? ? },
? ? ? }) ??
? ? },2、頁(yè)面中用標(biāo)簽將上傳的視頻顯示出來(lái)
<video ?src="{{sptemp}}" ></video>3、效果展示

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript動(dòng)態(tài)修改網(wǎng)頁(yè)元素內(nèi)容的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改網(wǎng)頁(yè)元素內(nèi)容的方法,實(shí)例分析了javascript操作html元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
詳細(xì)聊聊對(duì)async/await的理解和用法
隨著Nodev7的發(fā)布,越來(lái)越多的人開始研究據(jù)說(shuō)是異步編程終級(jí)解決方案的 async/await,這篇文章主要給大家介紹了關(guān)于對(duì)async/await的理解和用法,文中通過(guò)實(shí)例代碼介紹的介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
細(xì)數(shù)localStorage的用法及使用注意事項(xiàng)
這篇文章主要介紹了細(xì)數(shù)localStorage的用法及使用注意事項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
javascript 主動(dòng)派發(fā)事件總結(jié)
有時(shí)需要模仿用戶的一些動(dòng)作(鼠標(biāo)/鍵盤操作),最常見的莫過(guò)于鼠標(biāo)點(diǎn)擊。一一列舉2011-08-08
Bootstrap入門書籍之(五)導(dǎo)航條、分頁(yè)導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之(五)導(dǎo)航條、分頁(yè)導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02
針對(duì)BootStrap中tabs控件的美化和完善(推薦)
這篇文章主要介紹了針對(duì)BootStrap中tabs控件的美化和完善的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-07-07
微信小程序 動(dòng)態(tài)綁定數(shù)據(jù)及動(dòng)態(tài)事件處理
這篇文章主要介紹了微信小程序 動(dòng)態(tài)綁定數(shù)據(jù)及動(dòng)態(tài)事件處理的相關(guān)資料,需要的朋友可以參考下2017-03-03

