短視頻平臺的設計與實現

周舜

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

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

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

1 概述

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

和短視頻一樣，微信已成為當今熱門的社交平臺。據統計，微信用戶已超8億，微信小程序應用數量超過100萬，已覆蓋200多個行業，日活動用戶達到2億。基于微信平臺二次開發的應用程序顯示出越來越明顯的市場優勢，未來5G網絡一旦商用，短視頻和微信小程序的熱度屆時將更高。

2 系統功能模塊設計

2.1 短視頻平臺概述

本系統采用C/S結構體系，后臺采用ThinkPHP5框架和MySQL數據庫，數據交換方式選用JSON語言，客服端利用微信小程序設計二次開發的短視頻系統平臺。本系統設計的主要工作任務是開發后臺接口和設計微信小程序的發布模塊，其中后臺接口負責接收和處理客服端微信小程序發來的數據。

2.2 功能模塊介紹

2.2.1 個人中心模塊

個人中心模塊包括用戶ID、用戶登錄名、用戶密碼、用戶昵稱、用戶頭像、粉絲數量、關注人數、獲贊數、賬號創建時間、最后登錄時間、用戶狀態。

2.2.2 視頻模塊

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

2.2.3 背景音樂

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

3 數據庫設計

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

3.1 用戶賬戶表

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

3.2 背景音樂表

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

3.3 視頻信息表

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

4 系統詳細設計與實現

4.1 系統關鍵技術介紹

4.1.1 FFmpeg

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

4.1.2 阿里矢量圖標

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

4.1.3 數據跨域

由于JavaScript出于網絡安全考慮遵循的是“同源策略”，不允許其他對象跨域訪問，導致客戶端與服務器端之間的數據交換被阻斷，本文通過修改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 主要功能模塊實現

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

4.2.1 實現注冊登錄

注冊登錄頁面通過以下步驟實現。

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

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

4.2.2 實現短視頻列表

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

短視頻列表實現方法：用戶登錄成功后跳轉到短視頻列表頁面，通過訪問Videos接口的get_videos方法，聯合查詢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）短視頻列表實現上拉加載視頻?？头双@取服務端的分頁信息，用戶上拉操作觸發onReachBottom方法，通過判斷當前頁數和總頁數是否相等，如果不等current_page就加1，繼續向服務器請求下一頁數據，如果相等就提示“已經沒有視頻了”。

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

4.2.3 實現視頻詳情頁

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

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

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

4.2.4 實現用戶主頁

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

用戶主頁功能實現方法：頁面跳轉到用戶主頁頁面時，訪問onLoad方法，通過wx.getStorageSync獲取用戶ID，如果緩存沒有用戶ID直接跳轉到用戶登錄頁，如果有則通過發送用戶ID給服務器Users接口get_user方法處理，返回用戶數據。點擊“點擊查看”，發送用戶ID給服務器Videos接口get_uservideos方法聯合查詢表wx_admin和表wx_videos將當期用戶發布的視頻信息返回給頁面。頭像上傳功能和視頻上傳功能類似，這里只介紹視頻上傳功能。視頻上傳流程圖如圖2中圖所示，用戶點擊“上傳視頻”按鈕，彈出選擇視頻框選擇需要上傳的視頻，頁面跳轉到視頻選擇頁面，選擇或不選擇合成的音樂，填入或不填入視頻描述，點擊“上傳”視頻，數據傳給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是失敗

合并成功后提示“上傳視頻成功”，跳轉回個人主頁頁面。

5 系統測試

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

6 結語

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

注 釋

①數據來源于http：//cn.data.cmcm.com/report/detail/287。

②視頻素材來自抖音或網絡。

參 考 文 獻

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

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

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

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

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

[責任編輯：鐘聲賢]