基于七牛云接口的播放器实现(PHP)

/

2018-9-21

背景:这两天在研究网课系统,最终卡在了播放器的带宽问题上,用了一些网上的开源项目,但是用CDN加速效果不理想,导致播放视频的用户体验很差,于是就想着自己做一个播放器出来,做不出来组装一个也成

普通开源项目缺点:先说一些我用的某开源网课系统的播放器,大多是直接加载服务器上的视频文件,而且是一整个视频文件,(这样就导致http请求在视频资源加载完之前就超时死掉),通过研究慕课网的播放器,发现慕课网的播放器是加载一个个小的视频文件,以.ts文件结尾的,在此基础上经过一番查找,找到了这种播放器的实现原理:视频切片

最终我们采用了七牛云来实现

首先讲一下七牛文件(图片,视频)上传的流程

  1. 后端通过定制文件的处理方式(定制上传到的七牛库的路径,文件名,文件处理),再通过七牛的SDK来生成uploadToken,前端只要拿着文件和这个token,传给七牛,七牛就会对文件进行相应的处理,并返回结果(返回结果的处理不做讲解,可以自己查看七牛文档)
    2.并且,我们需要将返回结果做处理,比方说在上传成功后将文件链接存在数据库里,并将这个文件和我们的业务系统联系起来
  2. 前端通过我们存在数据库里的文件链接,来访问资源

七牛云有自带的多媒体处理API,只讲视频切片的用法

  • 音视频切片文档
  • 根据这个文档,我们可以实现如下视频上传所需的uploadToken接口
  • 这里还涉及到一个概念,叫持久化处理,结合这张图片,仔细看,我这里采用的策略是上传时就触发,因为我这里的viedoDeal字符串里包含了两部分,一个是saveMp4Entry参数,这个参数的意思是将这个处理好的视频文件命名为test2.mp4并存在我提前创建的bucket里,在后面的viedoDeal里前面的部分是切片处理,你可以在根据我上面的文档链接来定制这一条然后我又将saveMp4Entry拼接在这后面,作为一个整体放进了policy数组里,这个policy里面有另一个参数叫persistentPipeline,它指的是视频处理这个过程,放进哪个队列里,这个队列是需要我们在七牛的控制台手动创建的
    这样一来,最基础的uploadToken接口就完成了,整个视频上传的过程我们是可以在七牛的控制台直观的监控的,首先,在前端老哥写好上传页面后,上传文件,他那里显示上传好了之后,你进入七牛的bucket看一下,发现有了一个命名很奇怪的.mp4文件,这是源文件(未经切片处理的文件),然后呢你可以去队列里查看,发现多了一个任务,这个任务就是正在处理那个源文件,如果用的是我的代码,那就是正在进行视频切片啦,待这个队列任务完成后,你再进入bucket查看,发现多了好多的命名有规律的.ts文件,这些就是被切成一片一片的视频片段啦,还有另外一个关键文件,我们的test2.mp4,这个文件你用postman发get请求到这个链接,会得到如下反馈

    发现这是一个.ts文件的列表信息,通过这个文件,前端老哥就可以通过现有的播放器JS库来拉取相应的视频片段了

  • PS:在控制台看队列任务的时候,你会发现,他显示的结果是:任务完成,回调失败,如果你没写回调接口相关的参数的话,这样很正常,不过不影响我们实验

到这里,一个简易的播放器就做完了,后端部分我是用PHP写的(laravel框架)如果你感兴趣,可以参考我的代码,最基础的跟播放器有关的实现都在这里啦,一些细节的部分,以及业务逻辑就需要大家自行探索,七牛的文档还是很全的,当然了你也并不一定限制于七牛,一些其它平台的对象存储和视频处理接口应该都是可以用的

PS: 开发过程中,要注意缓存的问题,七牛貌似会默认给你的文件进行CDN加速,我之前就被它坑了,就是说,你新上传的文件链接如果和之前的文件链接重复了,你访问这个链接反馈的是旧文件,不是最新的文件哦

Reproduced please indicate the author and the source, and error a link to this page.
text link: //sealbaby.cn/mp4

Say something...

Website
Username
Email