周舜

【摘 要】文章通過(guò)概述短視頻和微信小程序的優(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ā)生劇烈變化，《獵豹全球智庫(kù)2018Q3中國(guó)App市場(chǎng)報(bào)告》①顯示，抖音App周活躍滲透率為17.561 4%，周人均打開(kāi)89.5次數(shù)的成績(jī)排在短視頻App榜首位，西瓜視頻、快手、火山小視頻周活躍滲透率均超過(guò)12.5%，周人均打開(kāi)次數(shù)超過(guò)80次。從全民平均數(shù)來(lái)看，平均每個(gè)手機(jī)用戶每天會(huì)花43.1 min在通信及社交上，花26.9 min在看新聞上，看短視頻和視頻的時(shí)間分別為18.2 min和6.5 min，看短視頻的時(shí)長(zhǎng)已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)看長(zhǎng)視頻的時(shí)長(zhǎng)。從短視頻的火爆程度可以看出，短視頻已深入人們的學(xué)習(xí)和生活當(dāng)中。

和短視頻一樣，微信已成為當(dāng)今熱門的社交平臺(tái)。據(jù)統(tǒng)計(jì)，微信用戶已超8億，微信小程序應(yīng)用數(shù)量超過(guò)100萬(wàn)，已覆蓋200多個(gè)行業(yè)，日活動(dòng)用戶達(dá)到2億?；谖⑿牌脚_(tái)二次開(kāi)發(fā)的應(yīng)用程序顯示出越來(lái)越明顯的市場(chǎng)優(yōu)勢(shì)，未來(lái)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ù)庫(kù)，數(shù)據(jù)交換方式選用JSON語(yǔ)言，客服端利用微信小程序設(shè)計(jì)二次開(kāi)發(fā)的短視頻系統(tǒng)平臺(tái)。本系統(tǒng)設(shè)計(jì)的主要工作任務(wù)是開(kāi)發(fā)后臺(tái)接口和設(shè)計(jì)微信小程序的發(fā)布模塊，其中后臺(tái)接口負(fù)責(zé)接收和處理客服端微信小程序發(fā)來(lái)的數(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、使用背景音樂(lè)ID、視頻描述、視頻存放路徑、視頻時(shí)間長(zhǎng)度、視頻寬度、視頻高度、視頻封面圖片地址、獲贊數(shù)量、狀態(tài)、創(chuàng)建時(shí)間。

2.2.3 背景音樂(lè)

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

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

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

3.1 用戶賬戶表

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

3.2 背景音樂(lè)表

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

3.3 視頻信息表

表名wx_videos，視頻信息表用于存儲(chǔ)視頻信息，包括發(fā)布者ID、使用背景音樂(lè)ID、視頻描述、視頻存放路徑、視頻時(shí)間長(zhǎng)度、視頻寬、視頻高、視頻封面圖片地址等，見(jiàn)表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ù)用、流、過(guò)濾和播放的領(lǐng)先多媒體框架。簡(jiǎn)單來(lái)說(shuō)，就是視音頻處理工具。應(yīng)用場(chǎng)景有播放器（射手影音、暴風(fēng)影音）、轉(zhuǎn)碼工具（格式工廠、剪切工具）、直播、視頻加碼、水印、濾鏡、特效等。

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

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

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

由于JavaScript出于網(wǎng)絡(luò)安全考慮遵循的是“同源策略”，不允許其他對(duì)象跨域訪問(wèn)，導(dǎo)致客戶端與服務(wù)器端之間的數(shù)據(jù)交換被阻斷，本文通過(guò)修改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)

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

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

注冊(cè)登錄頁(yè)面通過(guò)以下步驟實(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ù)后通過(guò)訪問(wèn)數(shù)據(jù)庫(kù)wx_admin表，判斷用戶名和密碼是否正確，login方法將判斷結(jié)果反饋給客服端?？头私邮盏降男畔㈩愋凸?種：第一種是用戶名和密碼都正確;第二種是用戶名或密碼不正確;第三種是該用戶名被禁用。

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

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

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

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ù)端的分頁(yè)信息，用戶上拉操作觸發(fā)onReachBottom方法，通過(guò)判斷當(dāng)前頁(yè)數(shù)和總頁(yè)數(shù)是否相等，如果不等current_page就加1，繼續(xù)向服務(wù)器請(qǐng)求下一頁(yè)數(shù)據(jù)，如果相等就提示“已經(jīng)沒(méi)有視頻了”。

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

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

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

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

（2）實(shí)現(xiàn)點(diǎn)贊。點(diǎn)贊和取消點(diǎn)贊功能是通過(guò)更改阿里矢量圖標(biāo)和更新服務(wù)器數(shù)據(jù)來(lái)實(shí)現(xiàn)，視頻初始發(fā)布時(shí)處于未點(diǎn)贊的狀態(tài)，用戶點(diǎn)擊點(diǎn)贊圖標(biāo)訪問(wèn)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)用戶主頁(yè)

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

用戶主頁(yè)功能實(shí)現(xiàn)方法：頁(yè)面跳轉(zhuǎn)到用戶主頁(yè)頁(yè)面時(shí)，訪問(wèn)onLoad方法，通過(guò)wx.getStorageSync獲取用戶ID，如果緩存沒(méi)有用戶ID直接跳轉(zhuǎn)到用戶登錄頁(yè)，如果有則通過(guò)發(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ā)布的視頻信息返回給頁(yè)面。頭像上傳功能和視頻上傳功能類似，這里只介紹視頻上傳功能。視頻上傳流程圖如圖2中圖所示，用戶點(diǎn)擊“上傳視頻”按鈕，彈出選擇視頻框選擇需要上傳的視頻，頁(yè)面跳轉(zhuǎn)到視頻選擇頁(yè)面，選擇或不選擇合成的音樂(lè)，填入或不填入視頻描述，點(diǎn)擊“上傳”視頻，數(shù)據(jù)傳給Uploadimg接口upvideo方法。upvideo方法通過(guò)插件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è)人主頁(yè)頁(yè)面。

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

在對(duì)本系統(tǒng)測(cè)試的過(guò)程中為確保系統(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)頁(yè)面功能的完整性和正確性。

6 結(jié)語(yǔ)

本系統(tǒng)對(duì)相關(guān)技術(shù)進(jìn)行深入分析，以ThinkPHP5框架為后臺(tái)開(kāi)發(fā)框架，以微信小程序?yàn)榍芭_(tái)結(jié)合MySQL數(shù)據(jù)庫(kù)和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)性，提高了開(kāi)發(fā)效率。下一步將圍繞短視頻平臺(tái)的音視頻分離、留言板、視頻后臺(tái)管理等工作展開(kāi)研究。

注 釋

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

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

參 考 文 獻(xiàn)

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

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

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

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

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

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