如何使用nodejs和ffmpeg生成视频预览缩略图？

Question

我正在创建一个自定义视频播放器，我想在用户将鼠标悬停在进度栏上时添加视频预览。

我可以使用 FFmpeg 生成缩略图，如下所示。

ffmpeg -i input -filter_complex \
    "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \
    -vframes 1 -q:v 2 outputfile.jpg

问题

要使用上面创建的精灵图像（组合缩略图），我需要生成一个WEBVTT包含缩略图和帧时间间隔的图像，如下所示。

WEBVTT

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68

00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68

我无法找到任何有关如何使用 node-js 和 FFmpeg 创建此类 WEBVTT 文件的 FFmpeg 命令或教程。

也许这里有人知道这个问题的解决方案？任何帮助将不胜感激。

Answer 1

您必须制作自己的工具来创建 WEBVTT 文件。这是一个简单的过程，您只需获取所需的信息并按照以下格式填写即可：

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

然后保存文件。

例子：

假设您有一个时长 60 秒的视频。您使用ffmpeg生成 10 个缩略图。

您编写一个简短的程序（在本例中为 Node.js），该程序根据上述格式的缩略图数量进行循环，其方式类似于：

const fs = require('fs')
const moment = require('moment')

let video_length = 60
let number_of_thumbnails = 10
let thumb_interval = video_length/number_of_thumbnails // so 6 seconds per thumbnail

let sprite_width = 600 // Values are assumed based each thumbnail having
let sprite_height = 340 //a width of 120 and a height of 68 with a total of 10

let start_time = moment('00:00:00', "HH:mm:ss.SSS")
let end_time = moment('00:00:00', "HH:mm:ss.SSS").add(thumb_interval , 'seconds')

let thumb_output = "WEBVTT\n\n"

for(let i=0;i<=(sprite_height /68);i++){
  for(let j=0;j<=(sprite_width/120);j++){

    thumb_output +=start_time.format("HH:mm:ss.SSS") +" --> "+ end_time.format("HH:mm:ss.SSS")+"\n"

    thumb_output += "thumbnails.jpg#xywh="+(j*120)+","+(i*68)+",120,68\n\n"

    start_time.add(thumb_interval , 'seconds')
    end_time.add(thumb_interval , 'seconds')
  }
}

fs.writeFileSync('thumbnails.vtt', thumb_output)

Moment.js库用于简化时间增量和格式