Add fade transitions (fade-in and fade-out) to a video using FFmpeg and Editframe

Transitions are key elements of video content. Well-deployed transitions like fades in and out can make your video content much more dynamic and engaging. Using a video editor to add these simple transitions can often be time-consuming, however—especially when you are adding these elements to multiple videos in a batch.

In this quick guide, you’ll learn how to use FFmpeg and Editframe to programmatically add fade-in and fade-out transitions to your videos. Use cases for this workflow include:

• Using fade transitions when stitching multiple videos together
• Smoothing out transitions between intros and outros
• Giving videos a more cinematic experience
• Generally improving transitions in videos

Let’s get started!

File assets

Here is a sample video file provided by pexels.com that we will use in this tutorial:

video.mp4

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 is the command to add a fade in transition to a video using FFmpeg:

ffmpeg -i video.mp4 -vf "fade=t=in:st=0:d=3" -c:a copy fadein.mp4

Let’s take a look at what this command is doing.

• In this line, we import the video input file:

ffmpeg -i video.mp4

• Here, we add the transition fade-in effect using the video effects filter -vf. fade=t=in is the name of the transition, st=0 is the start time for the fade (0 seconds), and d=3 is the duration of the effect (3 seconds):

-vf "fade=t=in:st=0:d=3"

• In this line, we copy the streams into the fadein.mp4 video file:

-c:a copy fadein.mp4

Adding a fade-out transition (FFmpeg)

Here is the command to add a fade-out transition with FFmpeg:

ffmpeg -i video.mp4 -vf "fade=t=out:st=4.06:d=3" -c:a copy fadeout.mp4

Once again, let’s step through each piece of the command.

• In this line, we import the video input file:

ffmpeg -i video.mp4

• Here, we add the transition fade-in effect using the video effects filter -vf. fade=t=out is the name of the transition, st=4.06 is the start time at 4.06 seconds (total video duration - fade-out effect duration) and d=3 is the duration of the effect (3 seconds).

-vf "fade=t=out:st=4.06:d=3"

• In this line, we copy the streams into the fadeout.mp4 video file:

-c:a copy fadeout.mp4

Here is the output video from the FFmpeg command:

fadein.mp4

fadeout.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 for your project:

mkdir editframe-video-transitions

• Initialize the Node.js project:

cd editframe-video-transitions && yarn init -y

• Install the Editframe Node.js SDK:

yarn add @editframe/editframe-js

• Create a create-video.js file to merge videos into a single video:

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

const main = async () => {
  const editframe = new Editframe({
    develop: true,
    token: 'YOUR_EDITFRAME_TOKEN',
  })
  const composition = await editframe.videos.new({
    dimensions: {
      height: 1080,
      width: 1920,
    },
  })
  const videoLayer = await composition.addVideo(
    // file
    `${__dirname}/video.mp4`,
    // config
    {
      transitions: [
        {
          options: {
            duration: 3, // seconds that transition takes to complete
          },
          type: 'fadeOut', // or fadeIn,
        },
      ],
    }
  )
  await composition.addSequence([videoLayer])
  const video = await composition.encodeSync()
  console.log(video)
}

main()

Let’s dive into the code that we added to this file.

• Here is where we initialize an Editframe instance with our Editframe Token (obtained by creating an Editframe application). We also set the develop key to true, which tells Editframe to open the output video in a new tab when encoding has finished:

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

• Here, we create a new video composition with 1920x1080 dimensions.

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

• Here we call the composition.addVideo method, and add the file path to the video composition as the first argument. Then we pass in the transitions Array to add the fade-out effect:

await composition.addVideo(
  // file
  `${__dirname}/video.mp4`,
  // config
  {
    transitions: [
      {
        options: {
          duration: 3, // seconds that transition takes to complete
        },
        type: 'fadeOut', // or fadeIn,
      },
    ],
  }
)

• Here, we encode the video synchronously. This can also be done async using a webhook:

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

• Now, run the video script:

node create-video

There you go! Here is the output video using the Editframe API:

editframe-fadeout.mp4

editframe-fadein.mp4

Note: You can add transitions, filter, trim videos, disable watermarks, and more. Learn more about this in the Editframe API docs.

Comparing the videos created with FFmpeg and the Editframe API

Here is a comparison of the videos created with Editframe and FFmpeg:

compare.mp4