不洗碗工作室--hanxiao
转载请标明出处
文章背景:这两天在研究网课系统,最终卡在了播放器的带宽问题上,用了一些网上的开源项目,但是用CDN加速效果不理想,导致播放视频的用户体验很差,于是就想着自己做一个播放器出来
先说一些我用的某开源网课系统的播放器,他是直接加载服务器上的视频文件,而且是一整个视频文件,这样就导致我的http请求在视频加载完之前就死掉了,然后播放器出现了不可预估的错误,左右衡量,感觉单纯加大http请求的生存时间不可取(不知道为啥,就是感觉不可取),于是我打开了慕课网的播放器并打开浏览器控制台,我发现慕课网的播放器是加载一个个小的视频文件,以.ts文件结尾的,在此基础上经过一番阴差阳错的查找,我找到了这种播放器的实现原理:视频切片
首先我们先讲一下七牛文件(图片,视频)上传的流程
- 后端通过定制文件的处理方式(定制上传到的七牛库的路径,文件名,文件处理),再通过七牛的SDK来生成uploadToken,然后前端只要拿着文件和这个token,传给七牛,七牛就会对我们的文件进行相应的处理,并返回结果(返回结果的处理不做讲解,可以自己查看七牛文档)
- 正常来说,我们是需要将返回结果做处理的,比方说在上传成功后将文件链接存在数据库里,并将这个文件和我们的业务系统联系起来
- 前端通过我们存在数据库里的文件链接,来访问资源
七牛云有自带的多媒体处理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:在控制台看队列任务的时候,你会发现,他显示的结果是:任务完成,回调失败,如果你没写回调接口相关的参数的话,这样很正常,不过不影响我们实验