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.
-ispecifies path of the input file
-frames:v 1stops working after the 1st frame (because we need only 1 frame).
:vis 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
.jpgin 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>