短视频平台的设计与实现
作者:***
来源:《企业科技与发展》2019年第02期
【摘 要】文章通过概述短视频和小程序的优势,认为小程序与短视频有着高度契合之处,运用PHP框架和插件FFmpeg解决了上拉加载、音视频合并、视频截图等技术难题,成功实现了短视频的音视频合并、视频截图、粉丝关注、点赞、数据跨域等功能,最后对各个模块进行了测试。
【关键词】短视频;音视频合并;计算机;小程序
【中图分类号】TP391.41 【文献标识码】A 【文章编号】1674-0688(2019)02-0053-03
1 概述
随着信息技术的深入发展,人们获取信息资源的方式在发生剧烈变化,《猎豹全球智库2
018Q3中国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 数据库设计
小视频app开发 使用小程序开发的短视频平台使用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/
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论