Crossfade Between Two Videos Using FFmpeg and Editframe API (Updated)

Published on July 1, 2023

Last updated on September 25, 2024

6 min read

Crossfading is a video transition effect in which one scene gradually fades out while another fades in. Crossfading is commonly used to transition between scenes, but it has many other applications in video production as well. Thanks to its versatility, it is one of the most popular fade effects seen in video content today.

This guide walks you through how to create a crossfade between two mp4 videos using two methods—FFmpeg, and the Editframe API. Once you master the crossfade, you might also want to try using other transitions, like dissolve or push-pull. Before you know it, you’ll be a regular Francis Ford Scorsese Spielberg.

Action!

Sample videos (provided above)
FFmpeg(opens in a new tab): (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)

Here is the complete FFmpeg command to merge two videos with a crossfade transition effect:

ffmpeg -i file1.mp4 -i file2.mp4 -filter_complex "[0:v]setpts=PTS-STARTPTS[v0]; \[1:v]format=yuva420p,fade=in:st=0:d=5:alpha=1,setpts=PTS-STARTPTS+(8/TB)[v1]; \[v0][v1]overlay,format=yuv420p[outv]" \-c:v libx264 -map "[outv]" crossfade.mp4

Let’s break this down and see what each part of the command is doing.

In this line, we import the videos files, file1.mp4 and file2.mp4:

ffmpeg -i file1.mp4 -i file2.mp4 \

In this line, we include the filter complex:

-filter_complex "[0:v]setpts=PTS-STARTPTS[v0];\

In this line, we select the second file's video stream and add a fade-in effect fade=in with a 5-second duration d=5. We will start at the beginning of the video st=0 , change the PTS(opens in a new tab) (Presentation Time Stamp) of the input frames to setpts=PTS-STARTPTS+(8/TB), and set this composition variable to [v1]:

[1:v]format=yuva420p,fade=in:st=0:d=5:alpha=1,setpts=PTS-STARTPTS+(8/TB)[v1]; \

In this line, we will take the first and second video compositions as overlays to accomplish the cross fade-in transition effect. Essentially, we’re using the end of the first video (which uses the fade-out effect) and combining it with the fade-in effect of the second video. This creates a crossfade effect:

[v0][v1]overlay,format=yuv420p[outv]" \

In this line, we copy the video streams, then map the video composition into the crossfade.mp4 video:

-c:v libx264 -map "[outv]" crossfade.mp4

Here is the final output video using the FFmpeg command:

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 add-cross-fade-in && npm install

Add assets to the project:

Add file1.mp4 and file2.mp4 to the src/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" />
    <style>
      @keyframes fade-out {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <ef-timegroup mode="sequence" class="w-[1920px] h-[1080px" overlap="5s">
      <ef-timegroup mode="contain" >
        <ef-video 
          src="/assets/file1.mp4"
          style="animation: var(--ef-transition--duration) var(--ef-transition-out-start) fade-out"
        >
      </ef-video>
      </ef-timegroup>
      <ef-timegroup mode="contain">
        <ef-video 
          style="animation: var(--ef-transition--duration) 0s fade-in"
          src="/assets/file2.mp4" 
        ></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 these lines, we add fade-out CSS animation to use later on the video element or we add it to the styles.css file:

<style>
      @keyframes fade-out {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>

In this line, we create a new video composition using the ef-timegroup element. the overlap attribute set to 5 seconds to create a crossfade effect:

<ef-timegroup
      mode="sequence"
      class="w-[1920px] h-[1080px" 
      overlap="5s"
    >
    { /* 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 import the first video element with a fade-out transition:
animation: var(--ef-transition--duration) var(--ef-transition-out-start) fade-out is used to add a fade-out transition to the video element, where
- var(--ef-transition--duration) is the duration of the transition effect,
- var(--ef-transition-out-start) is the start time of the transition effect.

<ef-video 
  src="/assets/file1.mp4"
  style="animation: var(--ef-transition--duration) var(--ef-transition-out-start) fade-out"
>
</ef-video>

ef-video is an Editframe element that allows you to add videos to your video composition.
In these lines, we import the second video element with a fade-in transition:
animation: var(--ef-transition--duration) 0s fade-in is used to add a fade-in transition to the video element, where
- var(--ef-transition--duration) is the duration of the transition effect,
- 0s is the start time of the transition effect. (0s means the transition will start at the beginning of the video instead of the end).

<ef-video 
  style="animation: var(--ef-transition--duration) 0s fade-in"
  src="/assets/file2.mp4"
>
</ef-video>

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:

editframe-crossfade.mp4

Note: You can add transitions, filters, trim videos, and more using the Editframe API, and Editframe API docs.

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

Crossfade Between Two Videos Using FFmpeg and Editframe API (Updated)

Published on July 1, 2023

Last updated on September 25, 2024

6 min read

File assets

file1.mp4

file2.mp4

Part 1: Using FFmpeg

Required tools:

crossfade.mp4

Part 2: Using Editframe

Required tools:

Let’s get started:

editframe-crossfade.mp4

compare.mp4