Creating a video poster image with ffmpeg

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.

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>
The source video file compares with output poster image
The source video file compares with output poster image

Related Posts