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

不洗碗工作室--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加速，我之前就被它坑了，就是说，你新上传的文件链接如果和之前的文件链接重复了，你访问这个链接反馈的是旧文件，不是最新的文件哦

还有还有，个人文笔不好，逻辑还有些混乱，虽然我已经尽可能梳理了，但是大家还是有可能看不大明白，欢迎在评论区留言，在本文章范围内的我如果会的话可以给大家讲解一下