javascript - 使用nodejs生成带有坐标的缩略图VTT文件

Question

我正在寻找与 nodejs 坐标生成缩略图 VTT 文件。
我用它来生成缩略图:

ffmpeg -i 1.mp4 -filter_complex "select='not(mod(n,190))',scale=160:90,tile=5x5" -vsync vfr -qscale:v 5 -an thumbs-%02d.jpg

这会生成多个 5x5 Sprite ，每个缩略图为 8 秒。所以我正在寻找这样的东西:

WEBVTT 
00:00.000 --> 00:08.000
/assets/thumbnails-01.jpg#xywh=0,0,160,90

00:09.000 --> 00:16.000
/assets/thumbnails-01.jpg#xywh=160,0,320,90

...

谢谢

Answer 1

我知道这已经晚了，但对于其他人来说，这是你如何做到的。

import fs from 'fs';
import moment from 'moment';

const thumbnailPrefix = 'thumbs';

const width = 160; // width of each thumbnail
const height = 90; // height of each thumbnail

const duration = 120; // Total duration of the video in seconds
const interval = 8; // Interval between thumbnails in seconds

const col = 5; // Number of thumbnails per row
const row = 5; // Number of thumbnails per column

let thumbOutput = 'WEBVTT\n\n';
const startTime = moment('00:00:00', 'HH:mm:ss.SSS');
const endTime = moment('00:00:00', 'HH:mm:ss.SSS').add(interval, 'seconds');

const totalImages = Math.floor(duration / interval); // Total no of thumbnails

const totalSpirits = Math.ceil(duration / interval / (row * col)); // Total no of spirits

// This loop is for generating multiple 5x5 sprite, you can remove this if you want all thumbnails in a single sprite
for (let k = 0; k < totalSpirits; k++) {
  for (let i = 0; i < row; i++) {
    for (let j = 0; j < col; j++) {
      const currentImageCount = k * row * col + i * col + j;
      if (currentImageCount > totalImages) {
        break;
      }
      thumbOutput += `${startTime.format('HH:mm:ss.SSS')} --> ${endTime.format('HH:mm:ss.SSS')}\n`;

      thumbOutput += `${thumbnailPrefix}-${k + 1 < 10 ? '0' : ''}${k + 1}.jpg#xywh=${j * width},${
        i * height
      },${width},${height}\n\n`;

      startTime.add(interval, 'seconds');
      endTime.add(interval, 'seconds');
    }
  }
}

fs.writeFileSync('./output.vtt', thumbOutput);

我还创建了 this小 npm 包，它让我可以轻松创建缩略图 Sprite ，它是 vtt 文件。