我们可以把视频的缩略图组合在一张图片上，然后用图片的位置来确定到底显示这个大图片上的哪个位置… 这种把图片组合在一起的方式叫做 Sprites …

这样做的好处就是可以提高网站的性能 ..

这里你看到的就是一张组合了多个缩略图的 Sprites 图片 …

下面我们可以打开设置视频缩略片的 vtt 文件 …

这里面所有的缩略图我们都可以设置为刚才你看一的组合以后的大的图片 …

然后我们再用位置信息控制要显示的部分图像 …

先在图像的后面加上一个 # 号 … 然后是 xywh … 等号 … 后面是对应的这四个参数的值 = 0,0,0,0 …

这里的 x 表示水平做位置 .. y 表示垂直位置 … w 是宽度 .. h 是高度 ..

我们可以先设置一下 w 和 h 的值 …

因为我们的每个缩略图的大小是 160 像素宽 … 68 像素高 … 所以这里的 w 的值就是 160 …

找到对应的位置 … 改成 160 .. h 的值是 68 … 最后这个零的位置表示 h 的值 … 改成 68 …

然后我们再设置x和y 的值 … 因为这是第一个缩略图 .. 所以不需要特别设置 ..

复制一下 … 粘贴到第二个缩略图上 …

同样这个缩略图的大小也是 160 x 68 的尺寸 … 所以后面的 w 和 h 的值不用动..

想要显示第二张缩略图 .. 我们得把 x 的值设置为 160 ….

这样会使用这个大的缩略图上的水平向右偏移 160 个像素，来显示一个 160 x 68 大小的图像 …

再设置一下第三张缩略图 …

第三张缩略图的位置需要向右偏移两个缩略图的宽度 … 160 乘以 2 是 320 个像素 ..

第四张缩略图应该水平向右偏移 480 个像素才能显示出来 ….

第五张需要向右偏移 640 个像素 …

设置好以后 … 保存一下 … 然后去浏览器上看看 …

点击播放…. 鼠标放在对应的时间段上 … 会显示在这个时间段上设置的缩略图 …

这里所有的缩略图都排在了同一张图片上 … 然后我们设置了要显示的区域的尺寸 … 再配合水平或者垂直的偏移 .. 来显示对应的缩略图 …