网站模版的优化,英德市住房城乡建设网站,网站建设公司市场开发方案,网站建设教程书籍免费下载文章目录一、API阅读1. 选择或拍摄视频2. 云函数API~文件上传3. 视频截帧二、App端视频上传流程2.1. 上传流程图2.2. 流程简述三、前端源码实战3.1. 选择/拍摄短视频3.2. 短视频上传3.3. 进度条页面3.4. 补充短视频内容3.5. 视频发布3.6. 视频预览四、后端源码实战4.1. 短视频发… 文章目录一、API阅读1. 选择或拍摄视频2. 云函数API~文件上传3. 视频截帧二、App端视频上传流程2.1. 上传流程图2.2. 流程简述三、前端源码实战3.1. 选择/拍摄短视频3.2. 短视频上传3.3. 进度条页面3.4. 补充短视频内容3.5. 视频发布3.6. 视频预览四、后端源码实战4.1. 短视频发布4.2. 逻辑处理五、效果图鉴赏5.1. 未登陆状态5.2. 发布模式选择5.3. 选择/录制短视频5.4. 短视频发布5.5. 查看已发布作品5.6. 首页查看短视频一、API阅读
1. 选择或拍摄视频
找到uni.chooseVideo(OBJECT)API
选择或拍摄视频文件https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
2. 云函数API~文件上传
用到的api:uniCloud.uploadFile(Object uploadFileOptions) uniCloud API文档 3. 视频截帧
用途视频截帧当视频封面 视频截帧阿里云服务
视频截帧服务 阿里云视频截帧
二、App端视频上传流程
2.1. 上传流程图 2.2. 流程简述
1.校验用户登录状态未登录则跳转登录页面进行登录登录流程继续。2.点击中间发布按钮3.选择或拍摄视频点击确认4.携带文件信息跳转短视频发布页面5.短视频发布页面加载时接收视频文件信息解析文件信息6.配置文件路径和云端文件名称7.调用云函数执行短视频云端上传8.短视频上传过程中进度条根据实际上传进度动态展示9.短视频上传完成调用阿里云视频截帧服务进行视频截帧封面制作10.短视频信息封装11.补充上传内容12.发布短视频调用后端接口服务13.短视频文件信息简要处理执行落库处理
三、前端源码实战
3.1. 选择/拍摄短视频 // 监听中间按钮的点击事件uni.onTabBarMidButtonTap((){// 未登录不能发布视频var myUserInfo getApp().getUserInfoSession();if (myUserInfo null) {uni.showToast({duration: 3000,title: 请登录~,icon: none});uni.navigateTo({url: ../loginRegist/loginRegist,animationType: slide-in-bottom,success() {me.loginWords 请登录}});return;}// console.log(onTabBarMidButtonTap);uni.switchTab({url: ../me/me});uni.chooseVideo({sourceType: [album],success(e) {uni.navigateTo({url: /pages/publish/publish?fileObjectEvent JSON.stringify(e)})/*** 或者采用uniCloud在客户端完成上传减少链路因为文件大通信链路和耗时是双倍的*/var times new Date().getTime();}})});3.2. 短视频上传 // 当前页面加载时触发onLoad(params) {var me this;this.statusBarHeight system.statusBarHeight;this.screenWidth system.screenWidth;// 上个页面传过来的文件事件对象其中包含了相册中选择的视频内容var fileObjectEvent JSON.parse(params.fileObjectEvent);var times new Date().getTime();uniCloud.uploadFile({// 要上传的文件对象 -获取视频临时路径filePath: fileObjectEvent.tempFilePath,// 使用阿里云时cloudPath为云端文件名//根据具体业务自定义 cloudPath: times .mp4,// 进度条事件onUploadProgress(progressEvent) {var percentCompleted Math.round((progressEvent.loaded * 100) / progressEvent.total);// 这个数值在视频上传过程中是动态变化的百分比以此来展示上传的具体进度me.percentCompleted percentCompleted;},// 上传完成后的流程操作success(f) {// 获取视频路径var videoUrlTemp f.filePath;// 获取视频IDvar videoUrl f.fileID;// 获得视频参数me.tempFilePath videoUrlTemp;me.videoUrl videoUrl;me.tempCover videoUrl ?x-oss-processvideo/snapshot,t_1,f_jpg,ar_auto; // 截帧me.width fileObjectEvent.width;me.height fileObjectEvent.height;}});},3.3. 进度条页面
!-- 进度条 --view stylemarginTop:60rpx;display: flex;flex-direction: column;justify-content: center;v-ifpercentCompleted ! 100progress :percentpercentCompleted stroke-width3 activeColor#ef274d backgroundColor#F1F1F1:style{screenWidth: screenWidth px} /text stylecolor: #F1F1F1;font-size: 16px;text-align: center;margin-top: 20px;:style{screenWidth: screenWidth px}视频上传中~ 请耐心等待~~/textimage modeaspectFit src../../static/images/loading-4.gifstylewidth: 600rpx;height: 600rpx;align-self: center;/view
3.4. 补充短视频内容
textarea classvlog-content placeholder-stylecolor: #9798a0; placeholder添加合适的标题内容 :valuetitle:modeltitle maxlength60 inputtypingContent confirm-typedone/textarea3.5. 视频发布
view :class{btn-publish:!publichTouched, btn-publish-touched: publichTouched}stylemargin-top: 30rpx;height: 90rpx;display: flex;justify-content: center;border-radius: 20px;touchstarttouchstartPublich touchendtouchendPublich clickdoPublichtext stylecolor: #e6e6e6;font-size: 18px;align-self: center;font-weight: 500;发布 Vlog/text/viewdoPublich() {var me this;var userId getApp().getUserInfoSession().id;var vlog {vlogerId: userId,url: me.videoUrl,cover: me.tempCover,title: me.title,width: me.width,height: me.height};// 发布视频var serverUrl app.globalData.serverUrl;uni.request({method: POST,header: {headerUserId: userId,headerUserToken: app.getUserSessionToken()},url: serverUrl /vlog/publish,data: vlog,success(result) {if (result.data.status 200) {uni.showToast({title: 发布成功,icon: none})uni.navigateBack({delta: 1,animationType: zoom-fade-in,animationDuration: 1000});uni.switchTab({url: ../me/me})} else {uni.showToast({title: result.data.msg,icon: none,duration: 3000});}}});},3.6. 视频预览 preview() {uni.navigateTo({url: /pages/publish/preview?videoUrl this.videoUrl width this.width height this.height,animationType: slide-in-bottom,animationDuration: 500})},四、后端源码实战
4.1. 短视频发布 /*** 发布vlog视频** param vlogBO* return*/PostMapping(publish)public GraceJSONResult publish(RequestBody VlogBO vlogBO) {vlogService.createVlog(vlogBO);return GraceJSONResult.ok();}4.2. 逻辑处理 /*** 发布vlog视频** param vlogBO*/TransactionalOverridepublic void createVlog(VlogBO vlogBO) {//视频IDString vid sid.nextShort();Vlog vlog new Vlog();BeanUtils.copyProperties(vlogBO, vlog);vlog.setId(vid);vlog.setLikeCounts(0);vlog.setCommentsCounts(0);vlog.setIsPrivate(YesOrNo.NO.type);vlog.setCreatedTime(new Date());vlog.setUpdatedTime(new Date());vlogMapper.insert(vlog);}五、效果图鉴赏
5.1. 未登陆状态 5.2. 发布模式选择 5.3. 选择/录制短视频 5.4. 短视频发布 5.5. 查看已发布作品 5.6. 首页查看短视频
