Creating a video poster image with ffmpeg

Armno's avatar image
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.

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
  <source src="video.mpg" type="video/mp4" />
The source video file compares with output poster image
The source video file compares with output poster image

Related posts