微信小程序实现上传视频功能
更新时间:2022年08月28日 08:52:51 作者:小黑学IT
这篇文章主要为大家详细介绍了微信小程序实现上传视频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序上传视频,供大家参考,具体内容如下
微信开发者工具需要安装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、效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
下面小编就为大家带来一篇浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论