Creating a video poster image with ffmpeg

Published on August 19th, 2021

By Armno P.

I’m working on a website that has a few short animations in <video> elements on the page.

I wanted a quick way to create a poster image from a video file (mp4) to use with poster attribute of the <video> element. The poster image will display while the video file is loading. This gives a hint to the user that there’s some content there.

I will use the first frame of the video file as a poster image. When the video file finishes loading and starts playing, there will be a smooth transition from the poster image to the video.

Creating a poster image from an mp4 file can be done with ffmpeg command line tool.

ffmpeg -i video.mp4 -frames:v 1 video-poster.png

This will create a PNG image that has the same width and height of the video file.

• -i specifies path of the input file
• -frames:v 1 stops working after the 1st frame (because we need only 1 frame). :v is a Stream specifier to tell ffmpeg that we are working with a video file.
• The last parameter is the output file name video-poster.png. If I want a JPG file, I can change .png to .jpg in the file name. ffmpeg will also handle image conversion.

To create a poster image at a specific time instead of at the beginning of the video, add -ss parameter with value in seconds

ffmpeg -ss 1.4 -i video.mp4 -frames:v 1 video-poster.png

Then I can use the poster image with <video> element like:

<video width="200" height="200" loop autoplay muted playsinline
  poster="video-poster.png">
  <source src="video.mpg" type="video/mp4" />
</video>