1.

一、用户选择视频

2.

1、微信选中视频接口

wx.chooseVideo(Objectobject)3.

拍摄视频或从手机相册中选视频。

参数Objectobject属性类型默认值是否必填说明支持版本sourceTypeArray.string['album','camera']否视频选择的来源compressedbooleantrue否是否压缩所选择的视频文件1.6.0maxDurationnumber60否拍摄视频最长拍摄时间，单位秒camerastring'back'否默认拉起的是前置或者后置摄像头。部分Android手机下由于系统ROM不支持无法生效successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）4.

object.sourceType的合法值

值说明album从相册选择视频camera使用相机拍摄视频5.

object.camera的合法值

值说明back默认拉起后置摄像头front默认拉起前置摄像头object.success回调函数6.

参数

7.

Objectres

属性类型说明支持版本tempFilePathstring选定视频的临时文件路径durationnumber选定视频的时间长度sizenumber选定视频的数据量大小heightnumber返回选定视频的高度widthnumber返回选定视频的宽度示例代码wx.chooseVideo({sourceType:['album','camera'],maxDuration:60,camera:'back',success(res){console.log(res.tempFilePath)}})8.

2、mine.js文件上传视频事件绑定uploadVideo事件编写（注：此步骤暂时只包含选中视频并上传到临时路径）

uploadVideo:function(){varmethis;wx.chooseVideo({sourceType:['album'],success(res){console.log(res);vardurationres.duration;vartmpheightres.height;vartmpwidthres.width;vartmpVideoUrlres.tempFilePath;vartmpCoverUrlres.thumbTempFilePath;if(duration11){wx.showToast({title:'视频长度不能超过10秒...',icon:"none",duration:2500})}elseif(duration1){wx.showToast({title:'视频长度不能小于1秒...',icon:"none",duration:2500})}else{//TODO打开选择bgm的页面}}})}9.

二、选择背景音乐页面

10.

1、

11.

chooseBgm.wxml

viewformbindsubmit'upload'radio-groupname"bgmId"blockwx:for"{{bgmList}}"viewclass'container'audioname"{{item.name}}"author"{{item.author}}"src"{{serverUrl}}{{item.path}}"style'width:300px'id"myAudio"controlsloop/audioradiostyle'margin-top:20px;'value'{{item.id}}'/radio/view/block/radio-groupviewclass"inputView"labelclass"loginLabel"视频描述：/labelinputname"desc"class"inputText"placeholder"说点什么吧"//view!--提交--buttonclass"submitBtn"type"primary"form-type'submit'上传视频/buttonbuttonclass"gobackBtn"type"warn"form-type'reset'重置/button/form/view12.

chooseBgm.wxss

page{height:100%;}.container{display:flex;margin-top:20rpx;justify-content:space-around;}.submitBtn{width:80%;margin-top:15px;}.gobackBtn{width:80%;margin-top:15px;}.loginLabel{color:gray;font-size:15px;}.inputText{float:right;text-align:right;margin-right:22px;margin-top:11px;font-size:15px;}.inputView{padding:5px;background-color:white;line-height:45px;border:solid1pxwhitesmoke;}13.

2、微信音频接口

audio14.

注意：1.6.0版本开始，该组件不再维护。建议使用能力更强的wx.createInnerAudioContext接口

15.

音频。

属性名类型默认值说明idStringaudio组件的唯一标识符srcString要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleanfalse是否显示默认控件posterString默认控件上的音频封面的图片资源地址，如果controls属性值为false则设置poster无效nameString未知音频默认控件上的音频名字，如果controls属性值为false则设置name无效authorString未知作者默认控件上的作者名字，如果controls属性值为false则设置author无效binderrorEventHandle当发生错误时触发error事件，detail{errMsg:MediaError.code}bindplayEventHandle当开始/继续播放时触发play事件bindpauseEventHandle当暂停播放时触发pause事件bindtimeupdateEventHandle当播放进度改变时触发timeupdate事件，detail{currentTime,duration}bindendedEventHandle当播放到末尾时触发ended事件16.

MediaError.code

返回错误码描述1获取资源被用户禁止2网络错误3解码错误4不合适资源17.

三、开发后台bgm列表接口

18.

四、bgm页面联调获取背景音乐列表

19.

chooseBgm.wxml

viewformbindsubmit'upload'radio-groupname"bgmId"blockwx:for"{{bgmList}}"viewclass'container'audioname"{{item.name}}"author"{{item.author}}"src"{{serverUrl}}{{item.path}}"style'width:300px'id"myAudio"controlsloop/audioradiostyle'margin-top:20px;'value'{{item.id}}'/radio/view/block/radio-groupviewclass"inputView"labelclass"loginLabel"视频描述：/labelinputname"desc"class"inputText"placeholder"说点什么吧"//view!--提交--buttonclass"submitBtn"type"primary"form-type'submit'上传视频/buttonbuttonclass"gobackBtn"type"warn"form-type'reset'重置/button/form/view20.

chooseBgm.js

constappgetApp()Page({data:{bgmList:[],serverUrl:"",poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age2592000',name:'此时此刻',author:'许巍',src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guidffffffff82def4af4b12b3cd9337d5e7uin346897220vkey6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6Afromtag46',},onLoad:function(params){varmethis;wx.showLoading({title:'请等待...',});varserverUrlapp.serverUrl;//调用后端wx.request({url:serverUrl+'/bgm/list',method:"POST",header:{'content-type':'application/json'//默认值},success:function(res){console.log(res.data);wx.hideLoading();if(res.data.status200){varbgmListres.data.data;me.setData({bgmList:bgmList,serverUrl:serverUrl});}}})}})21.

五、开发上传短视频接口

packagecom.imooc.controller;importjava.io.File;importjava.io.FileOutputStream;importjava.io.InputStream;importorg.apache.commons.lang3.StringUtils;importorg.apache.tomcat.util.http.fileupload.IOUtils;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.multipart.MultipartFile;importcom.imooc.pojo.Users;importcom.imooc.utils.IMoocJSONResult;importio.swagger.annotations.Api;importio.swagger.annotations.ApiImplicitParam;importio.swagger.annotations.ApiImplicitParams;importio.swagger.annotations.ApiOperation;importio.swagger.annotations.ApiParam;@RestController@Api(value"视频相关业务的接口",tags{"视频相关业务的controller"})@RequestMapping("/video")publicclassVideoController{@ApiOperation(value"用户上传视频",notes"用户上传视频的接口")@ApiImplicitParams({@ApiImplicitParam(name"userId",value"用户id",requiredtrue,dataType"String",paramType"form"),@ApiImplicitParam(name"bgmId",value"背景音乐id",requiredfalse,dataType"String",paramType"form"),@ApiImplicitParam(name"videoSeconds",value"背景音乐播放长度",requiredtrue,dataType"String",paramType"form"),@ApiImplicitParam(name"videoWidth",value"视频宽度",requiredtrue,dataType"String",paramType"form"),@ApiImplicitParam(name"videoHeight",value"视频高度",requiredtrue,dataType"String",paramType"form"),@ApiImplicitParam(name"desc",value"视频描述",requiredfalse,dataType"String",paramType"form")})@PostMapping(value"/upload",headers"content-typemultipart/form-data")publicIMoocJSONResultupload(StringuserId,StringbgmId,doublevideoSeconds,intvideoWidth,intvideoHeight,Stringdesc,@ApiParam(value"短视频",requiredtrue)MultipartFilefile)throwsException{//Alt+shirt+R//文件保存的空间StringfileSpace"D:/imooc_videos_dev";//保存到数据库的相对路径StringuploadPathDB"/"+userId+"/video";FileOutputStreamfileOutputStreamnull;InputStreaminputStreamnull;try{if(file!null){StringfileNamefile.getOriginalFilename();if(StringUtils.isNoneBlank(fileName)){//文件上传的最终路径StringfinalVideoPathfileSpace+uploadPathDB+"/"+fileName;//设置数据库保存的路径uploadPathDB+("/"+fileName);FileoutFilenewFile(finalVideoPath);if(outFile.getParentFile()!null||!outFile.getParentFile().isDirectory()){//创建父文件夹outFile.getParentFile().mkdirs();}fileOutputStreamnewFileOutputStream(outFile);inputStreamfile.getInputStream();IOUtils.copy(inputStream,fileOutputStream);}}}catch(Exceptione){e.printStackTrace();}finally{if(fileOutputStream!null){fileOutputStream.flush();fileOutputStream.close();}}returnIMoocJSONResult.ok();}}22.

六、视频临时参数传入到下一个页面

23.

首先在mine.js文件上的uploadVideo事件上补充页面跳转到chooseBgm.wxml

//打开选择bgm的页面wx.navigateTo({url:'../chooseBgm/chooseBgm?duration'+duration+"tmpHeight"+tmpHeight+"tmpWidth"+tmpWidth+"tmpVideoUrl"+tmpVideoUrl+"tmpCoverUrl"+tmpCoverUrl,})24.

然后在chooseBgm.js文件上的初加载事件onLoad事件上通过参数param接受，VideoParams是在一开始就设置的。

varmethis;console.log(params);me.setData({videoParams:params});25.

整个上传视频事件upLoad事件

upload:function(e){varmethis;varbgmIde.detail.value.bgmId;vardesce.detail.value.desc;console.log("bgmId:"+bgmId);console.log("desc:"+desc);vardurationme.data.videoParams.duration;vartmpheightme.data.videoParams.tmpHeight;vartmpwidthme.data.videoParams.tmpWidth;vartmpVideoUrlme.data.videoParams.tmpVideoUrl;vartmpCoverUrlme.data.videoParams.tmpCoverUrl;//上传短视频wx.showLoading({title:'Loading...',})varserverUrlapp.serverUrl;wx.uploadFile({url:serverUrl+'/video/upload',formData:{userId:app.userInfo.id,bgmId:bgmId,desc:desc,videoSeconds:duration,videoHeight:tmpheight,videoWidth:tmpwidth},filePath:tmpVideoUrl,name:'file',header:{'content-type':'application/json'//默认值},success(res){//vardataJSON.parse(res.data);console.log(res);wx.hideLoading();if(data.status200){wx.showToast({title:'上传成功！~~',icon:"success"});}}})}