基于七牛云接口的视频播放器实现

不洗碗工做室--hanxiao

转载请标明出处

文章背景：这两天在研究网课系统，最终卡在了播放器的带宽问题上，用了一些网上的开源项目，可是用CDN加速效果不理想，致使播放视频的用户体验不好，因而就想着本身作一个播放器出来

先说一些我用的某开源网课系统的播放器，他是直接加载服务器上的视频文件，并且是一整个视频文件，这样就致使个人http请求在视频加载完以前就死掉了，而后播放器出现了不可预估的错误，左右衡量，感受单纯加大http请求的生存时间不可取（不知道为啥，就是感受不可取），因而我打开了慕课网的播放器并打开浏览器控制台，我发现慕课网的播放器是加载一个个小的视频文件，以.ts文件结尾的，在此基础上通过一番阴差阳错的查找，我找到了这种播放器的实现原理：视频切片

首先咱们先讲一下七牛文件（图片，视频）上传的流程

1. 后端经过定制文件的处理方式（定制上传到的七牛库的路径，文件名，文件处理），再经过七牛的SDK来生成uploadToken，而后前端只要拿着文件和这个token，传给七牛，七牛就会对咱们的文件进行相应的处理，并返回结果（返回结果的处理不作讲解，能够本身查看七牛文档）
2. 正常来讲，咱们是须要将返回结果作处理的，比方说在上传成功后将文件连接存在数据库里，并将这个文件和咱们的业务系统联系起来
3. 前端经过咱们存在数据库里的文件连接，来访问资源

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

• 音视频切片文档

• 根据这个文档，咱们能够作出以下视频上传所需的uploadToken接口（我这里是用PHP写的，你们能够根据个人代码，照猫画虎嘛~）

  

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

  

  发现这是一个.ts文件的列表信息，经过这个文件，前端老哥就能够经过现有的播放器JS库来拉取相应的视频片断了

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

到这里，一个简易的播放器就作完了，具体的前端实现呢能够等咱们前端老哥的文章写出来，我会把连接贴到这里，后端部分我是用PHP写的（laravel框架），你能够参考个人代码，最基础的跟播放器有关的实现都在这里啦，一些细节的部分，以及业务逻辑就须要你们自行探索，七牛的文档仍是很全的，固然了你也并不必定限制于七牛，一些其它平台的对象存储和视频处理接口应该都是能够用的，看我的习惯啦~

啊对了，开发过程当中，要注意缓存的问题，七牛貌似会默认给你的文件进行CDN加速，我以前就被它坑了，就是说，你新上传的文件连接若是和以前的文件连接重复了，你访问这个连接反馈的是旧文件，不是最新的文件哦

还有还有，我的文笔很差，逻辑还有些混乱，虽然我已经尽量梳理了，可是你们仍是有可能看不大明白，欢迎在评论区留言，在本文章范围内的我若是会的话能够给你们讲解一下