Реалізація генерації превью-кадрів (thumbnails) для відео

Реалізація генерації превью-кадрів (thumbnails) для відео

Превью для відео потрібно в двох сценаріях: одиночний кадр як обкладинка (poster для <video>) та сітка кадрів для часової шкали (sprite sheet). Обидва варіанти будуються через FFmpeg, але логіка трохи інша.

Одиночне превью

Найпростіший варіант — кадр на певній часовій мітці:

ffmpeg -i input.mp4 -ss 00:00:05 -vframes 1 -q:v 2 thumbnail.jpg

-ss 00:00:05 — позиція (5 секунд від початку). -vframes 1 — один кадр. -q:v 2 — якість JPEG (1 = найкраще, 31 = найгірше).

Краще ставити мітку не на 0 секунд (часто чорний кадр) та не на останню секунду. Хороший евристичний підхід — 10% від довжини відео, але не менш 3 секунд та не більше 30.

Автовибір інформативного кадру

FFmpeg умує вибирати кадри по метриці «найбільше змінення» через фільтр thumbnail:

ffmpeg -i input.mp4 \
  -vf "thumbnail=300" \
  -vframes 1 \
  thumbnail.jpg

thumbnail=300 — аналізує кожні 300 кадрів та вибирає найбільш репрезентативний. Це приблизно 10–12 секунд при 24 fps. Повільніше, ніж прямий вибір за часом, але результат більш інформативний.

PHP-сервіс генерації превью

namespace App\Services;

class VideoThumbnailService
{
    public function generatePoster(
        string $videoPath,
        string $outputPath,
        ?float $offsetSeconds = null,
        int    $width         = 1280,
        int    $height        = 720
    ): void {
        $duration = $this->getVideoDuration($videoPath);
        $offset   = $offsetSeconds ?? max(3.0, $duration * 0.1);
        $offset   = min($offset, $duration - 1.0);

        $scaleFilter = "scale={$width}:{$height}:force_original_aspect_ratio=decrease,"
            . "pad={$width}:{$height}:(ow-iw)/2:(oh-ih)/2:black";

        $cmd = implode(' ', [
            'ffmpeg -y',
            '-ss ' . number_format($offset, 3, '.', ''),
            '-i ' . escapeshellarg($videoPath),
            '-vframes 1',
            "-vf " . escapeshellarg($scaleFilter),
            '-q:v 3',
            escapeshellarg($outputPath),
            '2>&1',
        ]);

        exec($cmd, $output, $exitCode);

        if ($exitCode !== 0 || !file_exists($outputPath)) {
            throw new \RuntimeException(
                "Thumbnail generation failed: " . implode("\n", $output)
            );
        }
    }

    public function generateSpriteSheet(
        string $videoPath,
        string $outputPath,
        int    $columns    = 10,
        int    $rows       = 10,
        int    $thumbWidth = 160
    ): array {
        $duration    = $this->getVideoDuration($videoPath);
        $totalFrames = $columns * $rows;
        $interval    = $duration / $totalFrames;

        // tile фільтр створює grid кадрів
        $fps    = 1 / $interval;
        $filter = "fps={$fps},scale={$thumbWidth}:-1,tile={$columns}x{$rows}";

        $cmd = implode(' ', [
            'ffmpeg -y',
            '-i ' . escapeshellarg($videoPath),
            "-vf " . escapeshellarg($filter),
            '-vframes 1',
            '-q:v 5',
            escapeshellarg($outputPath),
            '2>&1',
        ]);

        exec($cmd, $output, $exitCode);

        if ($exitCode !== 0) {
            throw new \RuntimeException(implode("\n", $output));
        }

        return [
            'path'        => $outputPath,
            'columns'     => $columns,
            'rows'        => $rows,
            'thumb_width' => $thumbWidth,
            'interval'    => $interval,   // секунд між кадрами
            'duration'    => $duration,
        ];
    }

    public function getVideoDuration(string $path): float
    {
        $cmd    = "ffprobe -v error -show_entries format=duration -of csv=p=0 "
            . escapeshellarg($path);
        $output = shell_exec($cmd);
        return (float) trim($output ?? '0');
    }
}

Sprite sheet для часової шкали

Плеєр показує користувачу превью при наведенні на прогрес-бар — це sprite sheet: одне зображення з сіткою кадрів. Клієнт змішує background-position залежно від позиції курсора.

Для відео довжиною 10 хвилин, сітка 10×10, інтервал — 6 секунд. Ширина одного кадру 160px, сітка 1600×900px (при 16:9 thumb).

JavaScript для розрахунку позиції:

function getThumbnailPosition(currentTime, spriteData) {
    const { columns, rows, thumbWidth, interval, duration } = spriteData;
    const thumbHeight = Math.round(thumbWidth * 9 / 16); // припускаємо 16:9

    const frameIndex = Math.min(
        Math.floor(currentTime / interval),
        columns * rows - 1
    );

    const col = frameIndex % columns;
    const row = Math.floor(frameIndex / columns);

    return {
        x: col * thumbWidth,
        y: row * thumbHeight,
        width:  thumbWidth,
        height: thumbHeight,
    };
}

CSS:

.seek-preview {
    background-image: url('/storage/videos/sprite.jpg');
    background-repeat: no-repeat;
    width: 160px;
    height: 90px;
}

JS при hover на прогрес-бар:

const pos   = getThumbnailPosition(hoveredTime, spriteData);
preview.style.backgroundPosition = `-${pos.x}px -${pos.y}px`;

Генерація в Job

// app/Jobs/GenerateVideoThumbnailsJob.php
class GenerateVideoThumbnailsJob implements ShouldQueue
{
    public int $timeout = 300;
    public int $tries   = 2;

    public function __construct(private int $videoId) {}

    public function handle(VideoThumbnailService $service): void
    {
        $video     = Video::findOrFail($this->videoId);
        $inputPath = Storage::disk('videos')->path($video->original_path);
        $dir       = Storage::disk('videos')->path('thumbnails/' . $video->id);

        @mkdir($dir, 0755, true);

        // Poster
        $posterPath = "{$dir}/poster.jpg";
        $service->generatePoster($inputPath, $posterPath);

        // Sprite sheet
        $spritePath = "{$dir}/sprite.jpg";
        $spriteData = $service->generateSpriteSheet($inputPath, $spritePath);

        $video->update([
            'poster_path'    => "thumbnails/{$video->id}/poster.jpg",
            'sprite_path'    => "thumbnails/{$video->id}/sprite.jpg",
            'sprite_data'    => $spriteData,
        ]);
    }
}

Зберігання в БД

ALTER TABLE videos
    ADD COLUMN poster_path  VARCHAR(500),
    ADD COLUMN sprite_path  VARCHAR(500),
    ADD COLUMN sprite_data  JSONB;

sprite_data зберігає метаданні сітки — columns, rows, interval, thumb_width. Клієнт отримує їх разом з даними відео та використовує для рендеринга превью на прогрес-баре.

Терміни

Генерація одиночного постера, Job, інтеграція з моделлю — 3–4 години. Sprite sheet + клієнтський JS для прогрес-бара — ще 4–6 годин.