看进度条上的小窗口，你有没有想过，哔哩哔哩是如何在进度条上显示视频预览的? 这个功能非常有用，尤其是在播放长视频时。

如何才能实现?

实现这一点有三种方法。

预先为视频生成 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），如下所示：

WEBVTT00:00:00.000 --> 00:00:02.000
/vo4susu/sprites/sprite_01.webp#xywh=0,0,160,9000:00:02.000 --> 00:00:04.000
/vo4susu/sprites/sprite_01.webp#xywh=160,0,160,90

其组成结构