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>

Related posts


