How to add a PNG overlay on a video using FFmpeg

FFmpeg is an incredibly powerful tool you can use for manipulating video
by Jon Yongfook · August 2021

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:

    Applying a static overlay on a video via API

    Applying multiple overlays on a video via API

    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    6 Pro Tips for Optimizing Web Automation Using Puppeteer

    Using Puppeteer to automate web browser-related tasks is a great way to speed up your work as a developer. In this article, we have listed six tips that will help you optimize them.

    How to Make GIFs from Images Using FFmpeg

    As the platform with the largest GIF database, GIPHY has a built-in tool that helps users to create these animated images. However, the features offered are limited. In this tutorial, learn how to make GIFs from a collection of images, that GIPHY’s tool is incapable of creating.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to add a PNG overlay on a video using FFmpeg
    How to add a PNG overlay on a video using FFmpeg