如何使用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用于简化时间增量和格式

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

How to generate video preview thumbnails using nodejs and ffmpeg?

javascript

node.js

ffmpeg

html5-video

video-processing