抖音实战~实现App端视频上传、发布、落库

这篇具有很好参考价值的文章主要介绍了抖音实战~实现App端视频上传、发布、落库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

抖音实战~实现App端视频上传、发布、落库

抖音实战~实现App端视频上传、发布、落库

一、API阅读
1. 选择或拍摄视频

找到uni.chooseVideo(OBJECT)API,

选择或拍摄视频文件:https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
抖音实战~实现App端视频上传、发布、落库

2. 云函数API~文件上传

用到的api:uniCloud.uploadFile(Object uploadFileOptions)
uniCloud API文档

抖音实战~实现App端视频上传、发布、落库

3. 视频截帧

用途:视频截帧当视频封面
视频截帧阿里云服务
抖音实战~实现App端视频上传、发布、落库

视频截帧服务
阿里云视频截帧
抖音实战~实现App端视频上传、发布、落库

二、App端视频上传流程
2.1. 上传流程图

抖音实战~实现App端视频上传、发布、落库

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;
					// 获取视频ID
					var videoUrl = f.fileID;

					// 获得视频参数
					me.tempFilePath = videoUrlTemp;
					me.videoUrl = videoUrl;
					me.tempCover = videoUrl + "?x-oss-process=video/snapshot,t_1,f_jpg,ar_auto"; // 截帧
					me.width = fileObjectEvent.width;
					me.height = fileObjectEvent.height;
				}
			});
		},
3.3. 进度条页面
<!-- 进度条 -->
		<view style="marginTop:60rpx;display: flex;flex-direction: column;justify-content: center;"
			v-if="percentCompleted != 100">
			<progress :percent="percentCompleted" stroke-width="3" activeColor="#ef274d" backgroundColor="#F1F1F1"
				:style="{screenWidth: screenWidth + 'px'}" />
			<text style="color: #F1F1F1;font-size: 16px;text-align: center;margin-top: 20px;"
				:style="{screenWidth: screenWidth + 'px'}">视频上传中~ 请耐心等待~~</text>
			<image mode="aspectFit" src="../../static/images/loading-4.gif"
				style="width: 600rpx;height: 600rpx;align-self: center;">
		</view>

3.4. 补充短视频内容
<textarea class="vlog-content" placeholder-style="color: #9798a0;" placeholder="添加合适的标题内容" :value="title"
				:model="title" maxlength="60" @input="typingContent" confirm-type="done"></textarea>
3.5. 视频发布

			<view :class="{'btn-publish':!publichTouched, 'btn-publish-touched': publichTouched}"
				style="margin-top: 30rpx;height: 90rpx;display: flex;justify-content: center;border-radius: 20px;"
				@touchstart="touchstartPublich" @touchend="touchendPublich" @click="doPublich">
				<text style="color: #e6e6e6;font-size: 18px;align-self: center;font-weight: 500;">发布 Vlog</text>
			</view>
	doPublich() {
				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
     */
    @Transactional
    @Override
    public void createVlog(VlogBO vlogBO) {

        //视频ID
        String 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. 未登陆状态

抖音实战~实现App端视频上传、发布、落库
抖音实战~实现App端视频上传、发布、落库

5.2. 发布模式选择

抖音实战~实现App端视频上传、发布、落库

5.3. 选择/录制短视频

抖音实战~实现App端视频上传、发布、落库

5.4. 短视频发布

抖音实战~实现App端视频上传、发布、落库

5.5. 查看已发布作品

抖音实战~实现App端视频上传、发布、落库

5.6. 首页查看短视频

抖音实战~实现App端视频上传、发布、落库文章来源地址https://www.toymoban.com/news/detail-404556.html

到了这里,关于抖音实战~实现App端视频上传、发布、落库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 学习uniapp 在App端模仿抖音刷视频效果

    uniapp小白, 模仿抖音首页的刷视频功能, uniapp插件市场有很多,但是爱好摸鱼的我,也想试一试其他方法 上面是效果图(样式比较潦草,没有仔细写) 一开始想得比较简单,上下滑动的效果用uni内置的swiper组件即可实现,然后就开始干了如下 h5端浏览器上看,感觉自己以及

    2023年04月27日
    浏览(51)
  • 如何将抖音API应用于抖音视频的录制和上传

    抖音API允许开发者进行二次开发,使得第三方应用程序可以与抖音进行交互。要将抖音API应用于抖音视频的录制和上传,你需要遵循以下步骤: 获取抖音API密钥:首先,你需要从抖音官网注册一个开发者账号,并创建一个应用以获得API密钥。这个密钥将用于身份验证,确保你

    2024年02月21日
    浏览(43)
  • 从零搭建仿抖音短视频APP-后端开发短视频业务模块(1)

    项目持续更新中: 仿抖音短视频APP专栏 目录 发布短视频的流程梳理 传统上传流程  传统上传 CDN上传 CDN上传流程 使用Unicloud云端功能  实现app端视频上传 保存视频信息入库 注:controller接受到文件之后会把文件上传到服务器,同时controller获得某一帧帧来获得我们的封面图,

    2023年04月12日
    浏览(54)
  • 仿抖音短视频小程序APP组件(超高性能)自动预加载-uniapp

    注:组件使用 vue3+typescript 开发 全局仅渲染 3 个 swiper-item 实测,不管加载多少数据也能丝滑滚动 适用于 vue3,vue2 请自行修 自动预加载视频 首次渲染优化 安装 nodejs: https://nodejs.org/en/ 安装依赖: npm i 运行项目: npm run dev:mp-weixin 构建项目资源: npm run build:mp-weixin 打开小程序开发

    2024年02月09日
    浏览(85)
  • HarmonyOS 实战开发案例-仿抖音短视频应用

    前段时间看到一篇文章,但是没有源码,是一个仿写抖音的文章,最近也在看这块,顺便写个简单的短视频小应用。 技术点拆分 1、http请求数据; 2、measure计算文本宽度; 3、video播放视频; 4、onTouch上滑/下拉切换视频; 5、List实现滚动加载; 效果展示 http请求数据 通过对

    2024年02月22日
    浏览(73)
  • 从零开始搭建仿抖音短视频APP-后端开发消息业务模块(1)

    项目持续更新中: 仿抖音短视频APP专栏 目录 保存系统消息到MongoDB 系统消息入库保存-关注 系统消息入库保存-点赞短视频 系统消息入库保存-评论与回复 我们把mongoDB整合到Springboot之后,我们需要把映射层面做好。 首先在model创建一个新的对象层面,也就是一个新的包: 我

    2024年02月01日
    浏览(63)
  • AutoJs手机自动化实战(包含抖音自动化刷视频实战)

    目录 介绍 环境准备 安装vscode插件 简单使用  测试连接 编写打开抖音app脚本测试  脚本打包成apk 去除脚本打开日志 实战QQ自动化发送消息 微信自动化发送朋友圈 ​编辑 抖音扫码登录 抖音自动化刷视频  Auto.js是一款不用ROOT就能实现自动点击、长按、滑动屏幕操作的安卓

    2024年04月11日
    浏览(45)
  • Axure在线购物商城小程序原型图,抖音商城垂直电商APP实战案例

    页面数量:共 60+ 页 兼容软件:Axure RP 9/10,不支持低版本 应用领域:品牌自营商城、垂直电商、短视频社区商城 作品申明:页面内容仅用于功能演示,无实际功能 本作品为品牌自营在线商城小程序的原型图,属于垂直电商解决方案(以某药业为例);目前已实现功能包括:

    2024年02月02日
    浏览(39)
  • 小红书笔记发布软件 批量上传视频

    百收网SEO短视频矩阵发布丨9平台视频发布助手 软件简述:软件仅支持win系统, 软件使用的是网页版模拟协议软件不绑定电脑,任意换机,不限登录账号数量, 软件支持抖音,快手,视频号,西瓜视频,百家号,B站,小红书,小红书商家版、tiktok,小世界等平台必备浏览器

    2024年02月04日
    浏览(83)
  • HIveSQL面试题52:近一个月发布的视频中热度最高的top3视频【抖音面试题,不得不去吐槽的一个题目】

    目录 0 问题描述         1 数据准备         2 问题分析        3 小结 现有用户-视频互动表tb_user_video_log id uid video_id start_time end_time if_follow if_like if_retweet comment_id 1 101 2001 2021-09-24 10:00:00 2021-09-24 10:00:30 1 1 1 NULL 2 101 2001 2021-10-01 10:00:00 2021-10-01 10:00:31 1 1 0 NULL 3 102 2001

    2023年04月24日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包