周舜

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

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

【中圖分類號】TP391.41 【文獻標識碼】A 【文章編號】1674-0688（2019）02-0053-03

1 概述

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

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

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

2.1 短視頻平臺概述

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

2.2 功能模塊介紹

2.2.1 個人中心模塊

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

2.2.2 視頻模塊

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

2.2.3 背景音樂

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

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

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

3.1 用戶賬戶表

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

3.2 背景音樂表

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

3.3 視頻信息表

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

4 系統(tǒng)詳細設(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 阿里矢量圖標

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

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

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

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

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

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

4.2.1 實現(xiàn)注冊登錄

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

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

（2）擁有注冊賬號和密碼后，填入相應(yīng)信息點擊登錄，數(shù)據(jù)會提交給服務(wù)器Login接口login方法，login方法處理數(shù)據(jù)后通過訪問數(shù)據(jù)庫wx_admin表，判斷用戶名和密碼是否正確，login方法將判斷結(jié)果反饋給客服端?？头私邮盏降男畔㈩愋凸?種：第一種是用戶名和密碼都正確;第二種是用戶名或密碼不正確;第三種是該用戶名被禁用。

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

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

短視頻列表實現(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）短視頻列表實現(xiàn)上拉加載視頻?？头双@取服務(wù)端的分頁信息，用戶上拉操作觸發(fā)onReachBottom方法，通過判斷當前頁數(shù)和總頁數(shù)是否相等，如果不等current_page就加1，繼續(xù)向服務(wù)器請求下一頁數(shù)據(jù)，如果相等就提示“已經(jīng)沒有視頻了”。

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

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

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

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

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

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

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

用戶主頁功能實現(xiàn)方法：頁面跳轉(zhuǎn)到用戶主頁頁面時，訪問onLoad方法，通過wx.getStorageSync獲取用戶ID，如果緩存沒有用戶ID直接跳轉(zhuǎn)到用戶登錄頁，如果有則通過發(fā)送用戶ID給服務(wù)器Users接口get_user方法處理，返回用戶數(shù)據(jù)。點擊“點擊查看”，發(fā)送用戶ID給服務(wù)器Videos接口get_uservideos方法聯(lián)合查詢表wx_admin和表wx_videos將當期用戶發(fā)布的視頻信息返回給頁面。頭像上傳功能和視頻上傳功能類似，這里只介紹視頻上傳功能。視頻上傳流程圖如圖2中圖所示，用戶點擊“上傳視頻”按鈕，彈出選擇視頻框選擇需要上傳的視頻，頁面跳轉(zhuǎ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)回個人主頁頁面。

5 系統(tǒng)測試

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

6 結(jié)語

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

注 釋

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

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

參 考 文 獻

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

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

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

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

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

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