Add a Watermark to the Center of a Video with FFmpeg and Editframe

A watermark is a graphic image or text element that’s overlaid on top of a video. Watermarks are typically a logo or brand identity, and are often used to protect the copyright of a video. Common use cases for adding watermarks in videos include:

• Adding copyright information to your content
• Adding a company logo in your videos
• Preventing a video from being used without your permission
• Adding social handles to your videos

In this tutorial, we will walk through the process of programmatically adding a watermark to a video using two methods—FFmpeg, and Editframe. Both of these powerful and versatile tools can help you accomplish a wide range of video editing tasks, like adding filters to videos, trimming, and adding text, to name just a few.

Let’s get started!

Files assets

Here’s a sample video file provided by pexels.com and a watermark photo provided by unsplash.com that we will use in this tutorial.

car.mp4

watermark.png

Part 1: Using FFmpeg

First, we’ll walk through this workflow using FFmpeg.

Required Tools

• Sample video file overlay (provided above)
• FFmpeg: (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)

Here’s the FFmpeg command used to add a watermark image in the center of the video:

ffmpeg -i car.mp4 -i watermark.png \
-filter_complex "[1]format=rgba \
,scale=w=326:h=490:force_original_aspect_ratio=decrease[logo]; \
[0][logo]overlay=(W-w)/2:(H-h)/2:format=auto,format=yuv420p" \
-c:a copy watermark.mp4

Let’s break down what the code above is doing.

In this line, we import the car.mp4 video file and watermark.png image:

ffmpeg -i car.mp4 -i watermark.png \

Here, we resize the watermark image to 326x490 and keep the original aspect ratio:

-filter_complex "[1]format=rgba,scale=w=326:h=490:force_original_aspect_ratio=decrease[logo]; \

In this line, will add the watermark as an overlay and center it using 50% of the width for the x position and 50% of the height for the y position:

[0][logo]overlay=(W-w)/2:(H-h)/2:format=auto,format=yuv420p" \

Here, we copy the audio and video streams, and set the output video to watermark.mp4:

-c:a copy watermark.mp4

Here’s the output of the video using this FFmpeg command:

watermark.mp4

Part 2: Using Editframe

Now let’s perform the same task using Editframe instead of FFmpeg.

Required tools:

• Node.js installed on your machine (v16+)
• Editframe API Token (you can create an account from this link)

*No need to have FFmpeg installed on your machine

• Create a folder project:

mkdir editframe-watermark

• Initialize a Node.js project:

cd editframe-watermark && yarn init -y

• Install the Editframe Node.js SDK:

yarn add @editframe/editframe-js

• Create a create-video.js file to add the watermark png image to the video:

const { Editframe } = require('@editframe/editframe-js')

async function main() {
  const editframe = new Editframe({
    develop: true,
    token: 'YOUR_EDITFRAME_TOKEN',
  })

  const composition = await editframe.videos.new({
    backgroundColor: '#000',
    dimensions: {
      height: 1080,
      width: 1920,
    },
    duration: 10,
  })
  await composition.addVideo(`${__dirname}/car.mp4`, {
    size: { format: 'fit' },
  })
  await composition.addImage(`${__dirname}/watermark.png`, {
    size: { width: 326, height: 490 },
    position: {
      x: 'center',
      y: 'center',
    },
  })
  const video = await composition.encodeSync()
  console.log(video)
}

main()

Let’s break down the code in our create-video.js file.

• In these lines, we initialize an Editframe instance with our Editframe Token (obtained by creating an Editframe application). We also set the develop value to true, which will open the output video in new tab when encoding has finished:

const editframe = new Editframe({
  develop: true,
  token: 'YOUR_EDITFRAME_TOKEN',
})

• In the object below, we create a new video composition with 1920x1080 dimensions:

const composition = await editframe.videos.new({
  dimensions: {
    height: 1080,
    width: 1920,
  },
  duration: 10,
})

• In the function below, we add the car video file to the Editframe video composition using the composition.addVideo method:

await composition.addVideo(`${__dirname}/car.mp4`, {
  size: { format: 'fit' },
})

• Here, we add the watermark image file to the Editframe video composition using the composition.addImage method. Also, we resize the watermark to 326x490, and position it in the center of the video file:

await composition.addImage(`${__dirname}/watermark.png`, {
  size: { width: 326, height: 490 },
  position: {
    x: 'center',
    y: 'center',
  },
})

• In these lines of code, we encode the video synchronously. We can also do this async using a webhook:

const video = await composition.encodeSync()
console.log(video)

• Run the video script:

node create-video

Here is the output video using the Editframe API:

editframe-watermark.mp4

Note: You can add transitions, filters, trim videos, and much more using Editframe. You can learn more about Editframe’s video API here, Editframe API docs.

Comparison video between FFmpeg and Editframe API

Here’s a comparison between the video produced using FFmpeg (left) and Editframe (right):

compare.mp4