鼠标放在播放器的控制栏上，会用工具提示的形式展示当前时间段里设置的视频的缩略图 … 下面我们来实现这个功能。

首先我们要准备一些视频的缩略图 .. 一般的视频播放器都有可以截取当前画面的功能 … 然后我们把这些截图缩小一些 … 这里我们把缩略图缩小成了 160 像素宽 …

把这些缩略图放在视频目录的下面 … 放在其它目录也可以，只要设置正确的图像路径就可以 …

然后我们可以去创建一个 WebVTT 格式的字幕文件 … 在里面可以设置不同时候段使用的缩略图 ..

先打开之前我们创建的一个字幕文件 …复制一下里面的内容 …

再新建一个文件 … 设置一下文件名 …. 可以使用视频的名称 … 后面再加上一个 thumb …

扩展是 .vtt

打开这个文件 … 粘贴内容 …

然后修改一下里面的内容 …

比如我们想让在视频开始到视频播放到 5 秒钟这段时间里，使用一个缩略图 …

然后在这个时间段的下面，去指定缩略图的位置 …

相对于这个字幕文件来说，缩略图是在 …. thumbnails/croods-tlr3_h720p-01.jpg

这个设置的意思就是 … 鼠标放在 0 到 5 秒之间这块 .. 会显示这个缩略图 …

我们可以继续去设置在其它时间段上使用的缩略图 …

10-15 …. 是 02 这个缩略图 …

15-20 .. 20-25 …. 25-30 … 保存一下 …

网页项目的设置

下面我们要把这个包含缩略图的 .vtt 放在播放器里 …

打开网页项目 .. 之前我们添加字幕的时候，在播放器的设置里使用了一个 tracks … 在这里，我们同样可以把缩略图添加到这里 …

先复制一组 tracks 里面的大括号 … 粘贴到它的下面 …

注意中间要用英文状态的逗号分隔一下

在这个 file 里，设置缩略图的 .vtt 文件所在的位置 …

然后 kind 要设置成 thumbnails … 说明一下 … 这个轨道是缩略图 .. 不是字幕 ..

最后的这个 label .. 我们可以删除掉…

保存一下 …

预览

到浏览器上预览一下 … 先点击播放… （#暂停）

鼠标放在播放器控制栏上的播放栏上 … 会出现当前这个时间段里设置的缩略图 ……