項目持續更新中：
仿抖音短視頻APP專欄

目錄

發布短視頻的流程梳理

傳統上傳流程?

傳統上傳

CDN上傳

CDN上傳流程

使用Unicloud云端功能

?實現app端視頻上傳

保存視頻信息入庫

---

發布短視頻的流程梳理

傳統上傳流程?

注：controller接受到文件之后會把文件上傳到服務器，同時controller獲得某一幀幀來獲得我們的封面圖，上傳到我們的文件服。視頻和封面的地址保存到我們的數據庫。

傳統上傳

?這里是兩個節點，整個鏈路帶寬資源占了2G，會有2G帶寬的損耗。用戶產生的風險也很大。

CDN上傳

云廠商提供：

CDN，靜態資源服務，全球都能訪問。?

傳統方式：前端上傳文件到cdn之后，我們可以拿到cdn中的播放地址，隨后我們會把視頻文件再次傳到controller。

現在：只需要拿到視頻文件的url地址，一些基本的視頻信息放到我們的controller中存儲就可以了。這里我們只有一次文件的上傳，產生的帶寬損耗發生在云廠商，風險的承擔也由他們承擔。

補：cdn帶有截幀的功能

優化：減少一次帶寬，優化傳輸速率，提升用戶體驗。

CDN上傳流程

?我們會拿到兩個url，文本信息提交到controller做處理。

使用Unicloud云端功能

?unicloud可以在云端編寫云函數，云函數作為接口為前端服務，這里不需要我們操作。

云端也提供了云數據庫服務。

?打開官方控制臺：
創建服務空間：

?打開HBuilder：

?關聯云空間：?

?集成成功之后的unicloud

?

?實現app端視頻上傳

發送在前端的：

?打開前端：

監聽函數，代表中間的+按鈕，可以讓APP.Vue監聽，就可以有相應方法的執行：

?這里的e是一個文件事件對象，

?跳轉到publish頁面：

?進度條：?

上傳成功之后，我們會得到一個文件對象（f）：

?這里阿里云會提供一個截幀服務。

最后重啟，打開主頁，點擊+上傳：

?這里的封面圖是截幀截取的

?

?點擊預覽視頻：

?返回網頁看我們的云存儲：

?這個就是我們剛剛上傳的地址。

這就完成了我們CDN的視頻上傳。

保存視頻信息入庫

在前端找到發布視頻的路由：

?在model中：

?構建service：

接口：

?接口實現：
?

@Service public class VlogServiceImpl implements VlogService {@Resourceprivate VlogMapper vlogMapper;@Autowiredprivate Sid sid;private static final String USER_FACE1 = "http://122.152.205.72:88/group1/M00/00/05/CpoxxF6ZUySASMbOAABBAXhjY0Y649.png";@Transactional@Overridepublic void createdVlog(VlogBO vlogBO) {String vid = sid.nextShort();Vlog vlog = new Vlog();BeanUtils.copyProperties(vlogBO,vlog);vlog.setId(vid);vlog.setCommentsCounts(0);vlog.setIsPrivate(YesOrNo.NO.type);vlog.setCreatedTime(new Date());vlog.setUpdatedTime(new Date());vlogMapper.insert(vlog);} }

?在controller層：

?Meavn中install，重啟運行。

?點擊發布，頁面消失，發布成功，打開數據庫：

?

把視頻的url地址在unicloud中搜索，檢查是否匹配。

總結

以上是生活随笔為你收集整理的从零搭建仿抖音短视频APP-后端开发短视频业务模块（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。