短視頻平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

周舜

【摘 要】文章通過概述短視頻和微信小程序的優(yōu)勢(shì)，認(rèn)為微信小程序與短視頻有著高度契合之處，運(yùn)用PHP框架和插件FFmpeg解決了上拉加載、音視頻合并、視頻截圖等技術(shù)難題，成功實(shí)現(xiàn)了短視頻的音視頻合并、視頻截圖、粉絲關(guān)注、點(diǎn)贊、數(shù)據(jù)跨域等功能，最后對(duì)各個(gè)模塊進(jìn)行了測(cè)試。

【關(guān)鍵詞】短視頻;音視頻合并;計(jì)算機(jī);微信小程序

【中圖分類號(hào)】TP391.41 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】1674-0688（2019）02-0053-03

1 概述

隨著信息技術(shù)的深入發(fā)展，人們獲取信息資源的方式在發(fā)生劇烈變化，《獵豹全球智庫2018Q3中國App市場報(bào)告》①顯示，抖音App周活躍滲透率為17.561 4%，周人均打開89.5次數(shù)的成績排在短視頻App榜首位，西瓜視頻、快手、火山小視頻周活躍滲透率均超過12.5%，周人均打開次數(shù)超過80次。從全民平均數(shù)來看，平均每個(gè)手機(jī)用戶每天會(huì)花43.1 min在通信及社交上，花26.9 min在看新聞上，看短視頻和視頻的時(shí)間分別為18.2 min和6.5 min，看短視頻的時(shí)長已經(jīng)遠(yuǎn)遠(yuǎn)超過看長視頻的時(shí)長。從短視頻的火爆程度可以看出，短視頻已深入人們的學(xué)習(xí)和生活當(dāng)中。

和短視頻一樣，微信已成為當(dāng)今熱門的社交平臺(tái)。據(jù)統(tǒng)計(jì)，微信用戶已超8億，微信小程序應(yīng)用數(shù)量超過100萬，已覆蓋200多個(gè)行業(yè)，日活動(dòng)用戶達(dá)到2億?；谖⑿牌脚_(tái)二次開發(fā)的應(yīng)用程序顯示出越來越明顯的市場優(yōu)勢(shì)，未來5G網(wǎng)絡(luò)一旦商用，短視頻和微信小程序的熱度屆時(shí)將更高。

2 系統(tǒng)功能模塊設(shè)計(jì)

2.1 短視頻平臺(tái)概述

本系統(tǒng)采用C/S結(jié)構(gòu)體系，后臺(tái)采用ThinkPHP5框架和MySQL數(shù)據(jù)庫，數(shù)據(jù)交換方式選用JSON語言，客服端利用微信小程序設(shè)計(jì)二次開發(fā)的短視頻系統(tǒng)平臺(tái)。本系統(tǒng)設(shè)計(jì)的主要工作任務(wù)是開發(fā)后臺(tái)接口和設(shè)計(jì)微信小程序的發(fā)布模塊，其中后臺(tái)接口負(fù)責(zé)接收和處理客服端微信小程序發(fā)來的數(shù)據(jù)。

2.2 功能模塊介紹

2.2.1 個(gè)人中心模塊

個(gè)人中心模塊包括用戶ID、用戶登錄名、用戶密碼、用戶昵稱、用戶頭像、粉絲數(shù)量、關(guān)注人數(shù)、獲贊數(shù)、賬號(hào)創(chuàng)建時(shí)間、最后登錄時(shí)間、用戶狀態(tài)。

2.2.2 視頻模塊

視頻模塊包括用戶ID、發(fā)布者ID、使用背景音樂ID、視頻描述、視頻存放路徑、視頻時(shí)間長度、視頻寬度、視頻高度、視頻封面圖片地址、獲贊數(shù)量、狀態(tài)、創(chuàng)建時(shí)間。

2.2.3 背景音樂

背景音樂模塊包括音樂ID、演唱人、歌名、播放地址。

3 數(shù)據(jù)庫設(shè)計(jì)

使用微信小程序開發(fā)的短視頻平臺(tái)使用MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)庫創(chuàng)建，創(chuàng)建好數(shù)據(jù)庫之后就是創(chuàng)建數(shù)據(jù)庫對(duì)象，如創(chuàng)建數(shù)據(jù)表、索引、數(shù)據(jù)存儲(chǔ)等。

3.1 用戶賬戶表

表名wx_admin，短視頻用戶賬戶表用于存儲(chǔ)用戶的信息，包括登錄賬號(hào)、登錄密碼、昵稱、頭像、粉絲數(shù)量、關(guān)注我的人數(shù)、創(chuàng)建時(shí)間、最后登錄時(shí)間等，見表1。

3.2 背景音樂表

表名wx_bgm，背景音樂表用于存儲(chǔ)視頻背景音樂，包括演唱人、歌名、播放地址等，見表2。

3.3 視頻信息表

表名wx_videos，視頻信息表用于存儲(chǔ)視頻信息，包括發(fā)布者ID、使用背景音樂ID、視頻描述、視頻存放路徑、視頻時(shí)間長度、視頻寬、視頻高、視頻封面圖片地址等，見表3。

4 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

4.1 系統(tǒng)關(guān)鍵技術(shù)介紹

4.1.1 FFmpeg

FFmpeg是解碼、編碼、轉(zhuǎn)碼、復(fù)用、解復(fù)用、流、過濾和播放的領(lǐng)先多媒體框架。簡單來說，就是視音頻處理工具。應(yīng)用場景有播放器（射手影音、暴風(fēng)影音）、轉(zhuǎn)碼工具（格式工廠、剪切工具）、直播、視頻加碼、水印、濾鏡、特效等。

4.1.2 阿里矢量圖標(biāo)

阿里矢量圖標(biāo)Iconfont由阿里巴巴團(tuán)隊(duì)傾力打造、設(shè)計(jì)的便捷前端開發(fā)矢量圖標(biāo)庫。該工具功能強(qiáng)大且圖標(biāo)內(nèi)容豐富，為開發(fā)人員提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。

4.1.3 數(shù)據(jù)跨域

由于JavaScript出于網(wǎng)絡(luò)安全考慮遵循的是“同源策略”，不允許其他對(duì)象跨域訪問，導(dǎo)致客戶端與服務(wù)器端之間的數(shù)據(jù)交換被阻斷，本文通過修改ThinkPHP5中AJAX跨域請(qǐng)求頭如下。

"Access-Control-Allow-Credentials"=>"true"? "Access-Control-Allow-Headers"=>"x-token，x-uid，x-token-check，x-requested-with，content-type，Host"

4.2 主要功能模塊實(shí)現(xiàn)

基于微信小程序的短視頻開發(fā)主要實(shí)現(xiàn)了用戶的登錄注冊(cè)、短視頻列表、視頻詳情頁、個(gè)人主頁等功能頁面。

4.2.1 實(shí)現(xiàn)注冊(cè)登錄

注冊(cè)登錄頁面通過以下步驟實(shí)現(xiàn)。

（1）用戶填寫用戶名和密碼，點(diǎn)擊注冊(cè)，提交合法數(shù)據(jù)給服務(wù)器Regist接口reg方法，服務(wù)器收到提交的數(shù)據(jù)首先判斷用戶名是否已注冊(cè)，如果已注冊(cè)返回“該賬號(hào)碼已注冊(cè)”，如果未注冊(cè)就繼續(xù)操作如給密碼加密、生成注冊(cè)日期等。

（2）擁有注冊(cè)賬號(hào)和密碼后，填入相應(yīng)信息點(diǎn)擊登錄，數(shù)據(jù)會(huì)提交給服務(wù)器Login接口login方法，login方法處理數(shù)據(jù)后通過訪問數(shù)據(jù)庫wx_admin表，判斷用戶名和密碼是否正確，login方法將判斷結(jié)果反饋給客服端。客服端接收到的信息類型共3種：第一種是用戶名和密碼都正確;第二種是用戶名或密碼不正確;第三種是該用戶名被禁用。

4.2.2 實(shí)現(xiàn)短視頻列表

短視頻列表主要展示所有用戶上傳的視頻，通過分頁技術(shù)初始加載5個(gè)短視頻封面圖，下拉刷新加載新的分頁視頻封面圖，點(diǎn)擊視頻封面圖可以跳轉(zhuǎn)到視頻詳情頁面。

短視頻列表實(shí)現(xiàn)方法：用戶登錄成功后跳轉(zhuǎn)到短視頻列表頁面，通過訪問Videos接口的get_videos方法，聯(lián)合查詢wx_admin表和wx_videos表，獲取上傳用戶頭像、上傳用戶昵稱、視頻封面等信息。通過ThinkPHP5自帶方法paginate傳遞分頁信息給客服端，具體代碼如下。

db（'admin'）->alias（'a'）->field（'a.nicheng，a.img，b.*'）->join（'videos b'，'a.id=b.user_id'）->pa-ginate（5）;

（1）短視頻列表實(shí)現(xiàn)上拉加載視頻。客服端獲取服務(wù)端的分頁信息，用戶上拉操作觸發(fā)onReachBottom方法，通過判斷當(dāng)前頁數(shù)和總頁數(shù)是否相等，如果不等current_page就加1，繼續(xù)向服務(wù)器請(qǐng)求下一頁數(shù)據(jù)，如果相等就提示“已經(jīng)沒有視頻了”。

（2）下拉刷新。下拉刷新視頻與上拉加載方法相似，這里就不再贅述。

4.2.3 實(shí)現(xiàn)視頻詳情頁

用戶點(diǎn)擊某個(gè)具體的視頻跳轉(zhuǎn)到視頻詳情頁，在該頁面中用戶可以點(diǎn)擊視頻發(fā)布者頭像成為發(fā)布者的粉絲、可以關(guān)注發(fā)布者、可以收藏該視頻等。

（1）視頻詳情頁實(shí)現(xiàn)方法：用戶點(diǎn)擊某個(gè)具體的視頻跳轉(zhuǎn)到視頻詳情頁時(shí)附帶該視頻的id值，通過方法wx.request向服務(wù)器Videos接口get_video方法發(fā)出請(qǐng)求。請(qǐng)求成功后將視頻地址src和發(fā)布者頭像faceImage傳給頁面。

（2）實(shí)現(xiàn)點(diǎn)贊。點(diǎn)贊和取消點(diǎn)贊功能是通過更改阿里矢量圖標(biāo)和更新服務(wù)器數(shù)據(jù)來實(shí)現(xiàn)，視頻初始發(fā)布時(shí)處于未點(diǎn)贊的狀態(tài)，用戶點(diǎn)擊點(diǎn)贊圖標(biāo)訪問changedznum方法判斷this.data.dzshu值是否等于0，如果不等于0，dzshu賦值1（點(diǎn)贊），否則就為0（取消點(diǎn)贊），提交dzshu值給服務(wù)器接口Users的changedznum方法，changedznum方法接收dzshu的值并判斷如果值為1表wx_admin的receive_praise_counts（此視頻點(diǎn)贊總數(shù)）字段就加1，否則receive_praise_counts字段減1。

4.2.4 實(shí)現(xiàn)用戶主頁

用戶點(diǎn)擊具體視頻詳情頁頭像圖標(biāo)跳轉(zhuǎn)到個(gè)人主頁頁面，該頁面顯示了用戶頭像、上傳視頻按鈕、查看已上傳按鈕、粉絲數(shù)、關(guān)注當(dāng)前用戶數(shù)、獲贊數(shù)、注銷等功能。

用戶主頁功能實(shí)現(xiàn)方法：頁面跳轉(zhuǎn)到用戶主頁頁面時(shí)，訪問onLoad方法，通過wx.getStorageSync獲取用戶ID，如果緩存沒有用戶ID直接跳轉(zhuǎn)到用戶登錄頁，如果有則通過發(fā)送用戶ID給服務(wù)器Users接口get_user方法處理，返回用戶數(shù)據(jù)。點(diǎn)擊“點(diǎn)擊查看”，發(fā)送用戶ID給服務(wù)器Videos接口get_uservideos方法聯(lián)合查詢表wx_admin和表wx_videos將當(dāng)期用戶發(fā)布的視頻信息返回給頁面。頭像上傳功能和視頻上傳功能類似，這里只介紹視頻上傳功能。視頻上傳流程圖如圖2中圖所示，用戶點(diǎn)擊“上傳視頻”按鈕，彈出選擇視頻框選擇需要上傳的視頻，頁面跳轉(zhuǎn)到視頻選擇頁面，選擇或不選擇合成的音樂，填入或不填入視頻描述，點(diǎn)擊“上傳”視頻，數(shù)據(jù)傳給Uploadimg接口upvideo方法。upvideo方法通過插件FFmpeg處理視頻，生成合并視頻和封面圖，核心代碼如下：

//合并視頻@ input1、@ input2為待合并地址@ output輸出地址

$r_path = ROOT_PATH ."/public/index/ffmpeg/bin/

ffmpeg";

exec（$r_path.' -i '. $input1 . " -i " . $input2 ." -t 14 -y ". $output，$out，$status）;

return $status;//0是成功 1是失敗

//生成封面圖這里選的是GIF圖片

$r_path = ROOT_PATH ."/public/index/ffmpeg/

bin/ffmpeg";

exec（$r_path.' -i '. $ input ." -vframes 1 -y -f gif " . $output，$out，$status）;

return $status;//0是成功 1是失敗

合并成功后提示“上傳視頻成功”，跳轉(zhuǎn)回個(gè)人主頁頁面。

5 系統(tǒng)測(cè)試

在對(duì)本系統(tǒng)測(cè)試的過程中為確保系統(tǒng)的穩(wěn)定性、安全性和實(shí)用性，主要采取了功能測(cè)試，測(cè)試軟件采用Postman。針對(duì)Bgmusic、Login、Regist、Uploadimg、Users、Videos接口提交對(duì)應(yīng)數(shù)據(jù)進(jìn)行反復(fù)測(cè)試，以此保證系統(tǒng)頁面功能的完整性和正確性。

6 結(jié)語

本系統(tǒng)對(duì)相關(guān)技術(shù)進(jìn)行深入分析，以ThinkPHP5框架為后臺(tái)開發(fā)框架，以微信小程序?yàn)榍芭_(tái)結(jié)合MySQL數(shù)據(jù)庫和FFmpeg等相關(guān)技術(shù)采用C/S結(jié)構(gòu)模式，從對(duì)短視頻的功能分析、系統(tǒng)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)，再到系統(tǒng)測(cè)試，成功地設(shè)計(jì)出一個(gè)基于微信小程序的短視頻系統(tǒng)，充分體現(xiàn)了微信小程序的優(yōu)越性、便捷化、跨平臺(tái)性，提高了開發(fā)效率。下一步將圍繞短視頻平臺(tái)的音視頻分離、留言板、視頻后臺(tái)管理等工作展開研究。

注 釋

①數(shù)據(jù)來源于http：//cn.data.cmcm.com/report/detail/287。

②視頻素材來自抖音或網(wǎng)絡(luò)。

參 考 文 獻(xiàn)

[1]申燕萍，何夢(mèng)磊.基于微信小程序的點(diǎn)餐系統(tǒng)[J].電腦知識(shí)與技術(shù)，2018（4）.

[2]王勛.“微信小程序開發(fā)”課程構(gòu)建與教學(xué)實(shí)踐[J].計(jì)算機(jī)時(shí)代，2018（3）：46-49.

[3]王曉紅，包圓圓，呂強(qiáng).移動(dòng)短視頻的發(fā)展現(xiàn)狀及趨勢(shì)觀察[J].中國編輯，2015（3）.

[4]范敬宜.移動(dòng)短視頻新聞應(yīng)用與實(shí)踐研究[J].中國報(bào)業(yè)，2018（7）.

[5]騰訊.微信小程序開發(fā)文檔[EB/OL].https：//developers.weixin.qq.com/miniprogram/dev/index.html，2017-10-18.

[責(zé)任編輯：鐘聲賢]