预览缩略图

当鼠标放到进度条上时就会出现缩略图来预览这个时间点的截图，现在很多视频网站都有这个功能。

NPlayer 的缩略图使用 thumbnail 参数设置，它是一个缩略图配置对象。

interface ThumbnailOptions {
  startSecond?: number;
  gapSecond?: number;
  row?: number;
  col?: number;
  width?: number;
  height?: number;
  images?: string[];
}

默认值如下：

{
  startSecond: 0,
  gapSecond: 10,
  col: 5,
  row: 5,
  width: 160,
  height: 90,
  images: []
}

预览缩略图其实是由一堆分辨率较小的截图组成的图片。

Docusaurus

我们可以看到这个雪碧图由 5 x 5 的小缩略图组成，当然一个视频可能有一堆这种雪碧图。

参数	描述
startSecond	缩略图制作的开始时间，比如缩略图是视频的第一秒开始制作的那么，这里就是 1
gapSecond	一张小缩略图时间跨度，如果小缩略图是每 5 秒截一张，那么这里就填 5
col	雪碧图的列数
row	雪碧图的行数
width	小缩略图的宽
height	小缩略图的高
images	雪碧图的链接地址数组

缩略图制作#

有很多方式可以制作视频的预览缩略图，比如用 NodeJS node-fluent-ffmpeg 库中的 thumbnails 方法。当然大家可以去网上寻找更多方法。

这里介绍如何直接用 ffmpeg 命令行生成视频缩略图。

info

ffmpeg 是非常强大音视频工具，很多播放器都是它作为内核，详情请查看ffmpeg 官方文档。

首先去 ffmpeg 官网下载并安装。

然后执行下面命令。

ffmpeg -i ./test.webm -vf 'fps=1/10:round=zero:start_time=-9,scale=160x90,tile=5x5' M%d.jpg

通过上面这个命令生成一堆 5 x 5 的雪碧图，每个雪碧图中小缩略图的尺寸是 160 x 90。雪碧图的文件名是 M1.jpg、M2.jp、M3.jpg... 这样递增。

-i 参数后面是视频文件。

-vf 参数后面跟着过滤器，多个过滤器用 , 分开，一个过滤器多个参数使用 : 分开。

fps=1/10 表示每 10 秒输出一张图片，round=zero 为时间戳向 0 取整。start_time=-9 是让它从第 1 秒开始截取，忽略掉 0 秒的黑屏帧，这里是 -9，而不是 1 的原因是，fps 我们设置的是 10 秒一张，所以想要从第 1 秒开始时，就用 1 - 10 等于 -9。

scale=160x90 设置输出图像分辨率大小，tile=5x5 将小图用 5x5 的方式组合在一起。

最后面的 M%d.jpg 就是文件名，%d 表示按数字递增。

那么用上面命令生成的缩略图，可以设置如下参数。

new Player({
  thumbnail: {
    startSecond: 1,
    images: ['M1.jpg', 'M2.jpg', 'M3.jpg']
  }
})

由于其他参数都可以使用默认值，所以这里就不填了。

缩略图制作#

info

推荐文章#