2024-11-27 13:30:00
steelcm.com
Learn how to create video sprites with just FFmpeg — perfect for lightweight video previews.
The following is an example of a video preview of the
Big Buck Bunny
video using a sprite sheet generated from Ffmpeg. Hover over the image to see
the preview change.
Save the following shell script as sprite.sh
, and update the permissions so
you can execute it (ie. chmod +x ./sprite.sh
).
#! /usr/bin/bash
INPUT=$1
OUTPUT=$2
FRAMES=20
DURATION_S=$(ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 $INPUT)
FPS=$(echo "scale=8; $FRAMES / $DURATION_S" | bc)
ffmpeg \
-y \
-i "$INPUT" \
-frames 1 \
-q:v 2 \
-filter_complex "fps=$FPS,pad=width=max(iw\,ih*(16/9)):height=ow/(16/9):x=(ow-iw)/2:y=(oh-ih)/2,scale=-1:135:force_original_aspect_ratio=decrease,tile=1x$FRAMES" \
$OUTPUT
You can then run the script as follows:
./sprite.sh yourvideo.mp4 yourvideospritesheet.png
The ffmpeg command can be explained as follows:
-
-y
Override any existing output. -
-i "$INPUT"
The input file. -
-frames 1
Only output a single image (one frame). -
-q:v 2
Ouput quality, 0 is the best. -
-filter_complex
That’s where all the magic happens.fps=$FPS
Set the desired FPS to extract the 20 frames from the entire
length of the video.pad=width=max(iw\,ih*(16/9)):height=ow/(16/9):x=(ow-iw)/2:y=(oh-ih)/2
This
pads the frame into a 16:9 aspect ratio and centres it.scale=-1:135:force_original_aspect_ratio=decrease
This scales the frame
down to 240×135.tile=1x$FRAMES
Finally we tile our output vertically into this grid, 1
frame across, 20 frames down.
The final output image look as follows. Once combined with some basic CSS and
JS, the scrubbing preview seen at the start of this article can be achieved.
Keep your files stored safely and securely with the SanDisk 2TB Extreme Portable SSD. With over 69,505 ratings and an impressive 4.6 out of 5 stars, this product has been purchased over 8K+ times in the past month. At only $129.99, this Amazon’s Choice product is a must-have for secure file storage.
Help keep private content private with the included password protection featuring 256-bit AES hardware encryption. Order now for just $129.99 on Amazon!
Support Techcratic
If you find value in Techcratic’s insights and articles, consider supporting us with Bitcoin. Your support helps me, as a solo operator, continue delivering high-quality content while managing all the technical aspects, from server maintenance to blog writing, future updates, and improvements. Support Innovation! Thank you.
Bitcoin Address:
bc1qlszw7elx2qahjwvaryh0tkgg8y68enw30gpvge
Please verify this address before sending funds.
Bitcoin QR Code
Simply scan the QR code below to support Techcratic.
Please read the Privacy and Security Disclaimer on how Techcratic handles your support.
Disclaimer: As an Amazon Associate, Techcratic may earn from qualifying purchases.