November 27th, 2024

Generate video sprites using just FFmpeg

The article outlines creating video sprites with FFmpeg using a shell script. It details calculating video duration, extracting frames, and generating a sprite sheet for web integration.

Read original articleLink Icon
Generate video sprites using just FFmpeg

This article provides a guide on how to create video sprites using FFmpeg, which are useful for generating lightweight video previews. The author demonstrates the process with a shell script named `sprite.sh`, which requires two arguments: the input video file and the desired output sprite sheet. The script first calculates the duration of the video and then determines the frames per second (FPS) needed to extract 20 frames for the sprite sheet. The FFmpeg command used in the script includes options to override existing outputs, specify the input file, limit the output to a single image, and set the output quality. The command also employs a filter complex to adjust the FPS, pad the frame to a 16:9 aspect ratio, scale the frame, and tile the output into a grid format. The final output is a sprite sheet that can be used in conjunction with CSS and JavaScript to create an interactive video preview.

- The article explains how to generate video sprites using FFmpeg.

- A shell script named `sprite.sh` is provided for creating the sprite sheet.

- The script calculates video duration and frames per second for extraction.

- FFmpeg commands are detailed for adjusting output quality and aspect ratio.

- The final output can be integrated with web technologies for video previews.

Link Icon 10 comments
By @EE84M3i - about 2 months
Is it common to call these sprites in British English? I would call them "thumbnails".
By @bastloing - about 2 months
Back in the day a sprite was a smaller 2d bitmap you'd superimpose on the screen. A key frame was a marker like this.
By @montroser - about 2 months
A long time ago, we used this approach to play videos at 15 fps in IE6, with no flash or realplayer plugins required! No sound though...
By @jvan - about 2 months
I've used vcs[0] to make contact sheets from videos. It has a nice feature that if it detects the frame is blacked out, it will shift the capture time so every frame on the sheet has something to look at. Easy syntax to set capture at every delta or capture x number of frames evenly distanced, columns per row, ignore a set length of end time, and frame size.

[0] https://p.outlyer.net/vcs

By @kookamamie - about 2 months
A "sprite" is commonly understood to have no background, so I'd say these are closer to thumbnails.
By @brokenmachine - about 2 months
I wish there was some way to get vlc to use external sprite files.

While I'm thinking about it, external chapter files would be great too. Then you could make your own bookmarks without modifying the video file.

By @lofaszvanitt - about 2 months
I get chills every time I watch this open source video. I don't know who created these mongrel creatures, but it's worse than a horror flick.
By @pdyc - about 2 months
interesting will probably integrate as sprite mode in my ffmpeg video editor https://newbeelearn.com/tools/videoeditor/
By @robblbobbl - about 2 months
Cool thanks