How to add a PNG overlay on a video using FFmpeg
Contents
FFmpeg is an incredibly powerful tool you can use for manipulating video. Here's how to add PNG overlays onto a video using FFmpeg.
Examples
A video with a static PNG overlay:
A video with a sequenece of PNG overlays:
Disclaimer: in the following examples I will not be setting any video / audio codec flags since you will likely want to choose your own. The following examples all use FFmpeg defaults for codecs and framerates.
Overlay a static PNG
You may want to overlay a static PNG to add a watermark or some kind of frame around a video.
Assuming that you have a video named video.mp4 and an overlay named overlay.png - and that the video and overlays are of the same dimensions, the FFmpeg command to overlay the PNG on the video is as follows:
ffmpeg -y -i video.mp4 -i overlay.png -filter_complex [0]overlay=x=0:y=0[out] -map [out] -map 0:a? test.mp4
If your video is of a different size to the overlay, or you need to standardize the size of the video before applying the overlay, you will need to use the scale and crop commands that FFmpeg offers.
Overlay a sequence of PNGs
Overlaying a sequence of multiple PNGs onto a video is also possible. A common use case for this would be to add hard-coded subtitles onto a video, that need to display at specific points in the video.
This is more challenging as it requires knowing the times in the video where you want the overlay to be visible.
Assuming that you have a video named video.mp4 and 3 overlays named 1.png 2.png 3.png - and that they video and overlays are of the same dimensions, the FFmpeg command to overlay the PNGs on the video is as follows:
ffmpeg -y -i video.mp4 -i 1.png -i 2.png -i 3.png -filter_complex [0][1]overlay=enable='between(t,0,3)':x=0:y=0[out];[out][2]overlay=enable='between(t,3,6)':x=0:y=0[out];[out][3]overlay=enable='between(t,6,9)':x=0:y=0[out] -map [out] -map 0:a? new.mp4
This would spread the overlays evenly out across a 9 second video. As you can see, the key to this is using the enable between feature of FFmpeg, and understanding the timestamps of when in your video you want to hide and show the different PNG overlays.
Again, if you need to scale / crop the video to fit a certain size, you can do this all in one command using the scale and crop commands that FFmpeg offers.
Use the Bannerbear API
If you need an easy way to apply PNG overlays whether single or multiple - especially if you want a way to make changes on the fly to an overlay (e.g. apply a static watermark with today's date, or a title) then you can try using the Bannerbear API.
It's a REST API that makes some of these types of common FFmpeg operations much more simple, so that you don't have to worry about cropping / scaling / timestamping. It's also highly scalable so you don't have to worry about managing cloud FFmpeg instances - it's all done for you :)
Here are some quick API examples:
