点播视频预览是怎么做到的?
看进度条上的小窗口,你有没有想过,这是如何在进度条上显示视频预览的? 这个功能非常有用,尤其是在播放长视频时。
如何才能实现?
实现这一点有三种方法。
- 预先为视频生成CSS sprites,并通过API获取;
- 预先为视频生成WebVTT文件,并通过API获取;
- 在播放器端实时取快照显示出来,这个过程需要客户端投入大量计算资源,在web浏览器中实时显示效果比前两者差,且略过。
CSS sprites
我们想象一个场景,进度条上每秒对应一个图片,那么就要将上百张甚至上千张图片打包,提供给客户端播放器,那要发出多少请求和消耗多少流量,不如将它们合并成一个文件发送,更节省内存和带宽。使用图片尺寸和位置信息来区分一张图片的各tile。
sprites,精灵图,也称为雪碧图,即一张图片由n个tile组合而成。
如下图所示,是一个88的矩阵,每个tile宽高是常见的16080,可以通过工具生成雪碧
然后通过以下css来控制显示哪个,这会将btn1的元素背景图片的起点向左滑160px,将btn2的元素背景图片的起点向左滑动320px,即分别显示第一行第二列(1,2)和第一行第三列(1,3)的图片。
WebVTT
Web视频文本轨道(WebVTT)是提供特定文本"提示"的文本轨道。WebVTT API 主要用于显示与视频内容叠加的字幕,但它还有其他用途:提供章节信息以便于导航,以及提供需要与音频或视频内容时间对齐的通用元数据。WebVTT的MIME格式text/vtt。一个WebVTT文件(.vtt)包含一行或者多行的时间提示性内容(cue),如下所示:
其组成结构
- "WEBVTT"固定关键词
- 空白行,相当于两个连续的换行符
- 任意数量的cue
每个cue第一行以时间开始,表示字幕/缩略图显示的时间,如00:00:00.000 --> 00:00:02.000表示在视频前2秒都显示指定缩略图。
每个cue的第二行是缩略图的访问地址,
如/voolyab/sprites/sprite_01.webp#xywh=xywh=0,0,160,90 表示/voolyab/sprites/sprite_01.webp图片,xywh=xywh=0,0,160,90 是图片坐标信息
- x轴偏移0px
- y轴偏移0px
- 宽160
- 高90
即图片中的第一行第一列,在第二个cue中xywh=160,0,160,90,即x轴偏160,偏移量第一个图片的宽度,跳过它即第一行第二列,以此类推。
生成雪碧图时,需要提供行列数和宽高。根据xywh四个参数,即可快速生webvtt。
EasyDSS是怎么实现点播进度条预览的?
EasyDSS采用 WEBVTT 的方案,提供进度条预览图。
EasyDSS是一款基于高效流媒体技术构建的一站式视频直播、点播与视频会议融合平台。它采用成熟的跨平台技术框架,提供从视频采集、编码、推流、传输、分发到播放的全链路解决方案。平台旨在帮助企业快速搭建稳定、安全、低延迟的专业视频应用,赋能业务数字化转型。