七牛上传开发(二)七牛控制台实现视频切片处理

背景

在小程序开发过程中,我们使用小程序提供的播放组件播放mp4格式的视频时,发现长达15min分钟的视频在4G环境下播放卡顿,加载速度慢,且拖拽进度条播放视频不流畅的问题。
尽管,我们将视频资源传到了七牛CDN存储,仍解决不了播放卡顿问题。于是,想到了以前做七牛调研时的视频切片处理方案。

什么是视频切片

切片将视频流按指定的时间间隔,切分成一系列分片文件,并生成一个索引文件记录分片文件的信息。

简而言之,就是将一整段视频切成一段段文件,然后播放时,加载索引文件,根据进度,加载播放指定分片文件。

那么,视频切片后会有哪些好处?

  1. 减少视频播放前加载时间
  2. 按需传输,稳定传输速率,节省带宽。
  3. 便于CDN缓存

七牛提供的音视频切片

音视频切片接口用于支持HTTP Live Streaming播放。HTTP Live Streaming 是由 Apple 提出的基于 HTTP 的流媒体传输协议。它将一整个音频、视频流切割成可由 HTTP 下载的一个个小的音视频流,并生成一个 M3U8 播放列表,客户端只需要获取资源的 M3U8 播放列表即可播放音视频。

七牛上传开发(二)七牛控制台实现视频切片处理_第1张图片
HLS协议下切片图示

在七牛控制台进行视频切片处理

Step1 登录七牛控制台

Step2 上传视频源文件

根据以下路径上传视频源文件:
对象存储 -> 选择一个存储空间(若没有,则创建一个存储空间)-> 内容管理 -> 上传文件 -> 选择文件

七牛上传开发(二)七牛控制台实现视频切片处理_第2张图片
对象存储上传源文件

上传成功后,记住上传的文件名以及bucket(存储空间名,此处图示为tianhls)

Step3 创建多媒体队列

在控制台首页的产品列表中,找到「多媒体队列」,并创建队列


七牛上传开发(二)七牛控制台实现视频切片处理_第3张图片
创建队列

此处,我们创建了一个叫「video_pipeline」的队列:


七牛上传开发(二)七牛控制台实现视频切片处理_第4张图片
创建队列名称

Step4 新建作业

在队列中,新建作业。根据提示,填写相关信息。


七牛上传开发(二)七牛控制台实现视频切片处理_第5张图片
新建作业

预设规格,根据具体需求选择 video-HLS-240kvideo-HLS-150kvideo-HLS-640kvideo-HLS-1000k 中任意一个。示例,选择video-HLS-640k.

最后,就是选择处理后文件的存储地址和文件名。需要注意的是,建议文件名取为 .m3u8结尾的文件名。

七牛上传开发(二)七牛控制台实现视频切片处理_第6张图片
选择目标空间和目标文件名

然后,点击「确认创建」。即可完成作业创建。接着,就是等待处理结果了。若状态更新为成功,则处理完成。


七牛上传开发(二)七牛控制台实现视频切片处理_第7张图片
查看处理状态

Step5 获取播放外链

回到「对象储存」,找到刚刚处理成功的文件。


七牛上传开发(二)七牛控制台实现视频切片处理_第8张图片
检索获取播放地址

Step 6 验证播放地址是否有效

测试地址
将获取到的播放地址,放到该网页上,进行测试。若播放成功,则说明文件有效。

相关文章

  • 七牛上传开发(三)使用NodeJS生成带数据处理的凭证
  • 七牛上传开发(二)七牛控制台实现视频切片处理
  • 七牛上传开发(一)限制文件类型和文件大小

参考资料

  • HTTP Live Streaming
  • youku等视频网站为什么都用切片技术,而不用流媒体技术呢?
  • 视频切片技术介绍

你可能感兴趣的:(七牛上传开发(二)七牛控制台实现视频切片处理)