关键词：
文章目录
一、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;
// 获取视频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. 未登陆状态
5.2. 发布模式选择
5.3. 选择/录制短视频
5.4. 短视频发布
5.5. 查看已发布作品
5.6. 首页查看短视频
抖音平台分析(代码片段)
抖音平台分析手机端抓包环境准备手机APP抓包分析环境搭建（夜神模拟器+burp/fidder）；浏览器中F12用手机界面模式重新加载，看network信息，部分手机浏览器可以访问的功能可以以此方式获取。基本结构整个社区生态：用于短视... 查看详情
python+selenium实现趣头条的短视频自动上传与发布实例演示，同时支持抖音快手b站小红书等平台的视频自动化同步发布(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等）的短视频自动发布，希望帮助大家更方便、高效... 查看详情
python+selenium实现趣头条的短视频自动上传与发布实例演示，同时支持抖音快手b站小红书等平台的视频自动化同步发布(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等）的短视频自动发布，希望帮助大家更方便、高效... 查看详情
python+selenium实现趣头条的短视频自动上传与发布实例演示，同时支持抖音快手b站小红书等平台的视频自动化同步发布(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等）的短视频自动发布，希望帮助大家更方便、高效... 查看详情
python+selenium实现自动上传并发布西瓜视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
python+selenium实现自动上传并发布大风号短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
python+selenium实现自动上传并发布小红书号短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
阿里云视频上传实战(代码片段)
背景说明 最近在做项目优化,关于阿里云视频上传方面一直存在视频上传过慢问题.由于之前采用的是服务端进行视频上传,主要的逻辑是客户端上传视频到服务端进行视频文件暂存,然后服务端上传视频到阿里云.上传过慢猜... 查看详情
android初学抖音短视频无水印下载app的实现(代码片段)
实现效果:在抖音复制分享链接粘贴分享链接到App,点击解析点击去下载进入浏览器下载获取无水印视频链接首先我们使用浏览器打开分享的链接8.97teO:/一起玩水吧在这炽热的夏天%%蓝色治愈系%%夏天%%游泳https://v.douyin.com/Y5SpHKD/复... 查看详情
python+selenium实现自动上传并发布快手短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
python+selenium实现自动上传并发布好看短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
python+selenium实现自动上传并发布快手短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
pc端和移动端都支持视频video自动播放的代码(代码片段)
需求说明今天有个朋友微信上说目前他们在做抖音短视频的内容创作，方向是国家级非物质文化遗产「汝瓷」，想在他们官方网站上增加短视频的功能，将抖音的内容页上传到网站上。其实这个功能并不复杂，只... 查看详情
pc端和移动端都支持视频video自动播放的代码(代码片段)
需求说明今天有个朋友微信上说目前他们在做抖音短视频的内容创作，方向是国家级非物质文化遗产「汝瓷」，想在他们官方网站上增加短视频的功能，将抖音的内容页上传到网站上。其实这个功能并不复杂，只... 查看详情
harmonyos鸿蒙学习笔记（15）swiper实现抖音切换视频播放效果(代码片段)
...，本文结合@Link，@State、@Watch来实现类似抖音滑动播放视频的效果。本文源码地址Swiper实战。项目结构如下图：其中PageVideo.ets是APP首页，用来提供视频播放的列表。PlayView.ets是视频播放器，随着PageVide... 查看详情
python网络爬虫实战：抖音短视频去水印爬虫详解(代码片段)
我们知道，在抖音APP中下载到的视频是有水印的，这就催生出了很多抖音短视频去水印的解析网站，小程序等。所以说，抖音短视频去水印这个东西并不是什么新鲜玩意儿，甚至你可以很轻松的在网上搜到抖... 查看详情
python+selenium实现自动上传并发布一点号短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情
python+selenium实现自动上传并发布一点号短视频实例演示(代码片段)
导读：本系列依次介绍目前主流的短视频平台（抖音、快手、B站、微视、小红书、好看视频、西瓜视频、视频号、搜狐视频等）的短视频自动发布，希望帮助大家更方便、高效的来进行自媒体的创作与管理。【本... 查看详情