短视频平台的设计与实现

周舜

【摘 要】文章通过概述短视频和微信小程序的优势，认为微信小程序与短视频有着高度契合之处，运用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方法将判断结果反馈给客服端。客服端接收到的信息类型共3种：第一种是用户名和密码都正确;第二种是用户名或密码不正确;第三种是该用户名被禁用。

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.

[责任编辑：钟声贤]