javascript - 如何使用 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

问题
要使用上面创建的 Sprite 图像(组合缩略图)，我需要生成一个 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 库用于简化时间增量和格式