看进度条上的小窗口，你有没有想过，哔哩哔哩是如何在进度条上显示视频预览的? 这个功能非常有用，尤其是在播放长视频时。
如何才能实现?
实现这一点有三种方法。
- 预先为视频生成 CSS sprites，并通过 API 获取
- 预先为视频生成 WebVTT 文件，并通过 API 获取
- 在播放器端实时取快照显示出来，这个过程需要客户端投入大量计算资源，在 web 浏览器中实时显示效果比前两者差，且略过。
CSS sprites
我们想象一个场景，进度条上每秒对应一个图片，那么就要将上百张甚至上千张图片打包，提供给客户端播放器，那要发出多少请求和消耗多少流量，不如将它们合并成一个文件发送，更节省内存和带宽。使用图片尺寸和位置信息来区分一张图片的各个 tile。
sprites，精灵图，也称为雪碧图，即一张图片由 n 个 tile 组合而成。
如下图所示，是一个 8*8 的矩阵，每个 tile 宽高是常见的 160*80，可以通过工具生成雪碧图。
然后通过以下 css 来控制显示哪个，这会将 btn1 的元素背景图片的起点向左滑动 160px，将 btn2 的元素背景图片的起点向左滑动 320px，即分别显示第一行第二列 (1,2) 和第一行第三列 (1,3) 的图片。
.tool-btn {
background: url(myfile.png) top left no-repeat;
display: inline-block;
height: 80px;
width: 160px;
}
#btn1 {
background-position: -160px 0px;
}
#btn2 {
background-position: -320px 0px;
}
WebVTT
Web 视频文本轨道 (WebVTT) 是提供特定文本 “提示” 的文本轨道。WebVTT API 主要用于显示与视频内容叠加的字幕，但它还有其他用途：提供章节信息以便于导航，以及提供需要与音频或视频内容时间对齐的通用元数据。
WebVTT 的 MIME 格式是 text/vtt。
一个 WebVTT 文件（.vtt）包含一行或者多行的时间提示性内容（cue），如下所示：
WEBVTT
00:00:00.000 --> 00:00:02.000
/vo4susu/sprites/sprite_01.webp#xywh=0,0,160,90
00:00:02.000 --> 00:00:04.000
/vo4susu/sprites/sprite_01.webp#xywh=160,0,160,90
其组成结构
- “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 的方案，提供进度条预览图。
如果你对具体实现很感兴趣，可以查看下一期文章了解更多。
欢迎来到论坛一起讨论