Create a video with black overlay and background music using FFmpeg and Editframe API

In today's digital age, video content stands out as one of the most effective ways to engage audiences across various platforms. Whether you're a social media enthusiast or a professional creator, the demand for polished and seamless videos remains constant. In this guide, we'll explore two powerful tools, FFmpeg and the Editframe API, that can help you create impressive videos with ease.

Let's dive in!

Required Tools and Resources

To get started, you will need:

FFmpeg installed and environment variables set up
Node.js installed on your machine (v16+)
Editframe API Token (Sign up here)

You will also need to download the sample video files (provided by pexels.com) and background music (from pixabay.com) provided below:

video1.mp4

video2.mp4

video3.mp4

video4.mp4

background-music.mp3

Part 1: Using FFmpeg

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

Setting Up Your FFmpeg Project

Create a dedicated project folder:

mkdir ffmpeg-video-overlay

Create a "videos" directory within your project folder:

mkdir videos

Create a text file named "text_file.txt" to specify the text you want to add to your video:

touch text_file.txt

Copy and paste the following text into "text_file.txt":

“We cannot solve problems
with the kind of thinking we
employed when we came up with them.”

— Albert Einstein

Generating the Video using FFmpeg

Now, let's create a video with a black overlay and background music using FFmpeg. Use the following FFmpeg commands:

for filename in  videos/*.mp4; do                                ✔  10082  21:26:17
ffmpeg -y -i "$filename" -c:a copy -c:v copy -bsf:v h264_mp4toannexb -f mpegts "${filename//.mp4/}.ts"
echo "file './${filename//.mp4/}.ts'" >> video.txt
done

ffmpeg -f concat -safe 0 -i video.txt -i background-music.mp3 -filter_complex "\
color=c=black@0.8:s=1080x1920[bg]; \
[0:v]scale=-1:1920,crop=1080:1920[padded_video]; \
[padded_video][bg]overlay=(main_w-overlay_w)/2:(main_h-overlay_h)/2, \
drawtext=textfile='text_file.txt':fontsize=50:fontcolor=white:x=(w-text_w)/2:y=(h-text_h)/2" -c:a aac -b:a 192k -t 00:00:49 output.mp4

rm -rf video.txt videos/*.ts

Let’s step through what this code is doing:

In this line, we iterate over each MP4 video file in our videos folder and run an FFmpeg command to create a .ts video file. (A TS file is a Video Transport Stream (TS) file that stores video data compressed with standard MPEG-2.). After that, we write the file path for the .ts files in the video.txt file:

for filename in  videos/*.mp4; do                                ✔  10082  21:26:17
ffmpeg -y -i "$filename" -c:a copy -c:v copy -bsf:v h264_mp4toannexb -f mpegts "${filename//.mp4/}.ts"
echo "file './${filename//.mp4/}.ts'" >> video.txt
done

Here, we concatenate all the .ts files and add background music, a black overlay, and the specified text. We also resize the output file to 1080:1920 with 9:16 aspect ratio, and set the frame rate to 30 fps.

ffmpeg -f concat -safe 0 -i video.txt -i background-music.mp3 -filter_complex "\
color=c=black@0.8:s=1080x1920[bg]; \
[0:v]scale=-1:1920,crop=1080:1920[padded_video]; \
[padded_video][bg]overlay=(main_w-overlay_w)/2:(main_h-overlay_h)/2, \
drawtext=textfile='text_file.txt':fontsize=50:fontcolor=white:x=(w-text_w)/2:y=(h-text_h)/2" -c:a aac -b:a 192k -t 00:00:49 output.mp4

Finally, when the videos have been merged together, we remove the temporary .ts files:

rm -rf video.txt videos/*.ts

Here is the resulting video:

output.mp4

Part 2: Creating the Video with Editframe

Now, let's achieve the same outcome using Editframe and Node.js.

Setting Up Your Editframe Project

Create a dedicated project folder for Editframe:

mkdir editframe-video-overlay

Initialize a Node.js project within your Editframe project folder:

yarn init -y

Install the Editframe Node.js SDK:

yarn add @editframe/editframe-js

Create a JavaScript file named "create-video.js" to merge videos, add text, and create a black overlay. Paste in the following code:

const {Editframe} = require("@editframe/editframe-js");
const path = require("path");
const main = async () => {
  const editframe = new Editframe({
    token: "YOUR_TOKEN_HERE",
    develop: true,
  });
  const composition = await editframe.videos.new({
    backgroundColor: "#000000",
    dimensions: {
      width: 1080,
      height: 1920,
    },
  });

  const video1 = await composition.addVideo(
    path.resolve("videos", "video1.mp4")
  );
  const video2 = await composition.addVideo(
    path.resolve("videos", "video2.mp4")
  );
  const video3 = await composition.addVideo(
    path.resolve("videos", "video3.mp4")
  );
  composition.addGroup([video1, video2, video3], {
    size: {
      format: "fill",
    },
  });
  await composition.addSequence([video1, video2, video3]);

  await composition.addAudio(path.resolve("background-music.mp3"));
  composition.addText(
    {
      text: "",
      backgroundColor: "#00000080",
    },
    {
      position: {
        x: "center",
        y: "center",
      },
      size: {
        width: 1080,
        height: 1920,
      },
    }
  );
  composition.addText(
    {
      text: "“We cannot solve problems with the kind of thinking we employed when we came up with them.” — Albert Einstein",
      fontSize: 100,
      color: "#ffffff",
    },
    {
      position: {
        x: "center",
        y: "center",
      },
    }
  );

  const video = await composition.encode();
  console.log(video);
};
main();

Let’s break down what the code in this file is doing:

In this line, we initialize an Editframe instance with your Editframe Token and set the develop option to true for auto-previewing the encoded video in a new browser tab.

const editframe = new Editframe({
  develop: true,
  token: "YOUR_TOKEN_HERE",
})

In the object below, we create a new video composition with 1080x1920 dimensions:

const composition = await editframe.videos.new({
  backgroundColor: '#000',
  dimensions: {
      width: 1080,
      height: 1920,
  },
})

In these lines, we add the videos files using the composition.addVideo method, and resize all the videos using composition.addGroup to apply layer attribute to all of them

const video1 = await composition.addVideo(
    path.resolve("videos", "video1.mp4")
  );
  const video2 = await composition.addVideo(
    path.resolve("videos", "video2.mp4")
  );
  const video3 = await composition.addVideo(
    path.resolve("videos", "video3.mp4")
  );
  composition.addGroup([video1, video2, video3], {
    size: {
      format: "fill",
    },
  });

Here, we place the videos in sequence to dynamically calculate the composition duration:

await composition.addSequence([video1, video2, video3]);

In this line, we add the background music file to the composition using the composition.addAudio method

await composition.addAudio(path.resolve("background-music.mp3"));

Here is where we add a black overlay with 50% black background using composition.addText.

composition.addText(
    {
      text: "",
      backgroundColor: "#00000080",
    },
    {
      position: {
        x: "center",
        y: "center",
      },
      size: {
        width: 1080,
        height: 1920,
      },
    }
  );

Using the composition.addText method, we then add the text to the video.

composition.addText(
    {
      text: "“We cannot solve problems with the kind of thinking we employed when we came up with them.” — Albert Einstein",
      fontSize: 100,
      color: "#ffffff",
    },
    {
      position: {
        x: "center",
        y: "center",
      },
    }
  );

Then we encode the video synchronously. (We could also do this async using a webhook):

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

Running the Editframe Project

Execute the following command to run the Editframe project:

node ./create-video.js

Boom! Here’s the output video from the Editframe API:

editframe.mp4

Note: Editframe offers a wide range of features, including transitions, filters, video trimming, and more. For detailed information, refer to the Editframe API documentation.

In this tutorial, you learned how to create videos with a black overlay and background music using both FFmpeg and the Editframe API. Choose the method that best suits your workflow and enjoy creating stunning videos. If you have any questions or feedback, don’t hesitate to reach out. Happy editing!