CODEWITHSUNDEEP
videoffmpegthumbnails
somenxavier
somenxavier

Reputation: 1557

Create a thumbnail with play icon inside with ffmpeg

I want to create a thubnail with ffmpeg with a play inside (like a picture above; taking from Dan Meyer site) for showing that it's a video and not an image.

enter image description here

Upvotes: 0

Views: 1433

Answers (1)

Mick
Mick

Reputation: 25471

If your use case is for a web site also, you can do this in two steps - first create the thumbnail and then add an overlay of a play button to the resulting image, using HTML5/CSS.

The following will create a thumbnail 10 seconds (as an example) into a video:

ffmpeg -i video.mp4 -ss 00:00:10.0 -vframes 1 thumb1.png

And you can add a play button via CSS referring to your video element along these lines:

.video a {
   position: absolute;
   background: url("path.../playButton.png");
   height: 20px;
   width: 20px;
   top: 20px;
   left: 20px;
}

Getting it responsive, so it is positioned correctly is worth some thought - there is a post on this here with more detail: http://douglasgreen.com/demo/responsive-video-play-button/

The advantage of this approach is that allows you separate the PlayButton look and feel from the thumbnail generation, and it also is possibly less processing than doing both via FFMPEG (although to be sure this would have to be tested and timed, and it is a trade off of the processing to create the image vs the browser processing).

If your use case is not for a web site or you want to do it all in one go anyway, the following (from this answer: https://stackoverflow.com/a/25499933/334402) should point you in the right direction:

ffmpeg -ss 30 -i movie.mp4 -i play.png -filter_complex \
"[0:v][1:v]overlay=main_w/2-overlay_w/2:main_h/2-overlay_h/2" \
-vframes 1 output.png

Upvotes: 2

Related Questions