点播视频预览是怎么做到的?
看进度条上的小窗口，你有没有想过，这是如何在进度条上显示视频预览的? 这个功能非常有用，尤其是在播放长视频时。
如何才能实现?
实现这一点有三种方法。
- 预先为视频生成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是一款基于高效流媒体技术构建的一站式视频直播、点播与视频会议融合平台。它采用成熟的跨平台技术框架，提供从视频采集、编码、推流、传输、分发到播放的全链路解决方案。平台旨在帮助企业快速搭建稳定、安全、低延迟的专业视频应用，赋能业务数字化转型。