抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

业务场景,门店客户观看平台发的视频,一键发布视频,领取优惠,目的是利用抖音小程序作为拓客工具。编码思路:1:观看视频,下载视频到本地。2:JS实现视频切割,分片上传。3:上传后等待抖音服务合成视频ID,即抖音开放平台存放的视频video_id。4:调用开放平台接口发布视频整个环节思路清晰,纯属理论派,我们秉承实践才是硬道理,不做参数工程师和理论工程师,下面把整个实现代码和

业务场景,门店客户观看平台发的视频,一键发布视频,领取优惠,目的是利用抖音小程序作为拓客工具。

编码思路:

1:观看视频,下载视频到本地。

2:JS实现视频切割,分片上传。

3:上传后等待抖音服务合成视频ID,即抖音开放平台存放的视频video_id。

4:调用开放平台接口发布视频

整个环节思路清晰,纯属理论派,我们秉承实践才是硬道理,不做参数工程师和理论工程师,下面把整个实现代码和效果贴出来。

代码实现第一步,下载视频:

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

分片上传视频我们需要按抖音小程序的约束,先创建上传视频的任务ID(upload_id),后面持续进行多次异步上传文件,注意是异步,绑定此任务ID,再把视频合成,返回给我们一个video_id

我们拿到video_id,请求自己的服务器接口,直接替客户发布视频,即,发布抖音视频。

先拿到上传任务ID,即upload_id,这个必须用真机测试。

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

调试真实数据如图:

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

绑定数据到对象

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

分片上传代码多,说不清楚,下面上传附件查看源代码即可,注意看控制台,有报错,这个是哪个现象导致的呢,来分析一下原因:

分片上传视频是异步的,此处视频切了9片,异步上传,但是我客户端是怎么判断上传完了呢,大家一般会说如下图:

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

注意啊,因为是异步上传,网络的不稳定因素,我什么时间去请求抖音接口,拿到分片视频合成的video_id,下图看官方文档如图:

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

有什么办法,或者逻辑,只让我请求一次,拿到video_id呢?因为上传视频是异步的,其实是9片视频同时在上传,根本不能判断出哪一个切片先上传上去,所以抖音也没有给出一个明确的flag来标识,抖音不知道我们要上传多少片视频,每个视频多大,所以抖音不能在分片上传的返回信息里告诉我们,已经上传完了,可以来找我来请求获取合成视频video_id了,所以此处,万能的循环代码就上了,因为设计到视频下载和分片上传,本身时间就会比较长!

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

再看分片上传的代码段:

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

还有一个坑:需要我们自己对JS的String属性做兼容性调整,在抖音小程序这个壳子里,有写兼容性很坑爹!

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

分片上传和切割视频的代码比较繁琐,就不解析了,直接上附件,目前这个代码片段在网络上不好找,很是费了时间,测试环境也需要用真机来测试,耗时费力,比去工地绑钢筋还累。

下图上几张项目图:欢迎回复交流

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

抖音怎么上传视频,小程序JS实现分片视频上传,服务端代客户发布抖音实现?

附件下载:目前发布文章不支持夹带附件

私信发-传送门发 1 即可,领取代码段,欢迎交流学习。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.jiafen6.com/4823.html