Create a video with black overlay and background music using FFmpeg and Editframe API (Updated!)

Published on May 25, 2023

Last updated on September 25, 2024

6 min read

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(opens in a new tab) installed and environment variables set up
Node.js installed on your machine (v16+)
Editframe API Token (Sign up here(opens in a new tab))

You will also need to download the sample video files (provided by pexels.com) and background music (from pixabay.com(opens in a new tab)) 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

Required tools:

Node.js installed on your machine
No need to have FFmpeg installed on your machine
Editframe API Token (you can create an account from this link(opens in a new tab))

Let’s get started:

Setup a new Node.js project using the Editframe CLI:

npx @editframe/create@beta

Install the required dependencies:

cd create-black-overlay-video && npm install

Add assets to the project:

Add video1.mp4, video2.mp4, video3.mp4, video4.mp4 and background-music.mp3 to the assets folder.

Update the index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>
    <body>
      <ef-timegroup
        mode="sequence"
        class="w-[1080px] h-[1920px] overflow-hidden"
      >
      <div class="bg-black/50 w-full h-full z-[100] relative flex flex-col  justify-center items-center">
  
        <h1 class="text-white text-left px-6 text-[120px]">“We cannot solve problems with the kind of thinking we employed when we came up with them.” — 
          Albert Einstein</h1>
      </div>
        <ef-timegroup mode="contain">
          <ef-video
            src="/assets/video1.mp4"
            class="w-full h-full object-cover object-center"
          ></ef-video>
          <ef-audio src="/assets/background-music.mp3"></ef-audio>
        </ef-timegroup>
        <ef-timegroup mode="contain">
          <ef-video
            src="/assets/video2.mp4"
            class="w-full h-full object-cover object-center"
          ></ef-video>
        </ef-timegroup>
        <ef-timegroup mode="contain">
          <ef-video
            src="/assets/video3.mp4"
            class="w-full h-full object-cover object-center"
          ></ef-video>
        </ef-timegroup>
        <ef-timegroup mode="contain">
          <ef-video
            src="/assets/video4.mp4"
            class="w-full h-full object-cover object-center"
          ></ef-video>
        </ef-timegroup>
      </ef-timegroup>
    </body>
</html>

Let’s walk through what the code in this file is doing.

In these lines, we import the index.js file and the styles.css file which contains the styles for the video and @editframe/elements:

<head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

In this line, we create a new video composition using the ef-timegroup element.

<ef-timegroup
      mode="sequence"
      class="w-[1080px] h-[1920px] overflow-hidden"
    >
    { /* Add elements here */ }
</ef-timegroup>

In these lines, we set a new time group with a mode of contain for each video to add the video composition:

<ef-timegroup mode="contain">
        { /* Add elements here */ }
</ef-timegroup>

In these lines, we add a black overlay with the quote text in the center of the video:

<div class="bg-black/50 w-full h-full z-[100] relative flex flex-col  justify-center items-center">
    <h1 class="text-white text-left px-6 text-[120px]">“We cannot solve problems with the kind of thinking we employed when we came up with them.” — Albert Einstein</h1>
  </div>

In these lines, we import each video as a timegroup element to make a sequence of videos:

<ef-timegroup mode="contain">
    <ef-video
      src="/assets/video1.mp4"
      class="w-full h-full object-cover object-center"
    ></ef-video>
    <ef-audio src="/assets/audio-example.mp3"></ef-audio>
  </ef-timegroup>
  <ef-timegroup mode="contain">
    <ef-video
      src="/assets/video2.mp4"
      class="w-full h-full object-cover object-center"
    ></ef-video>
  </ef-timegroup>
  <ef-timegroup mode="contain">
    <ef-video
      src="/assets/video3.mp4"
      class="w-full h-full object-cover object-center"
    ></ef-video>
  </ef-timegroup>
  <ef-timegroup mode="contain">
    <ef-video
      src="/assets/video4.mp4"
      class="w-full h-full object-cover object-center"
    ></ef-video>
  </ef-timegroup>
</ef-timegroup>

ef-audio is an Editframe element that allows you to add audio files to your video composition.
ef-video is an Editframe element that allows you to add videos to your video composition.

Preview the project:

npx vite .

Update the .env file with your Editframe API token:

EF_TOKEN="YOUR_API_TOKEN"

Render the video:

npx @editframe/cli render .

Here is 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(opens in a new tab).

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!