Automatically turn images into a slideshow using FFmpeg and Editframe

You might not associate the word “slideshow” with new, modern, technology-forward presentations. But from sales and marketing assets to social media content, this tried-and-true storytelling method is still alive and well in the digital age. With the right editing, slideshows can make for an eye-popping way to show off your brand, promote an event, or elevate the look of your social media feeds.

In this tutorial, we’ll show you how to programmatically create a slideshow by merging and combining multiple images into a single video using two methods: FFmpeg, and Editframe. The final output will be a video MP4. You can even take this a step further and use either FFmpeg or Editframe (whichever method best suits you) to incorporate audio and transition effects that take your slideshow to the next level.

By the end of this tutorial, you’ll know how to make an amazing photo or video slideshow programmatically and at scale, and you’ll forget all about the dusty projector in your grandma’s basement.

Let’s get started.

File assets

Here are the sample image files provided by unsplash.com that we will use in our tutorial:

file1.jpg

file2.jpg

file3.jpg

Part 1: Using FFmpeg

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

Required Tools

  • Sample video and audio files (provided above)
  • FFmpeg: (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)
  • Create a video.txt file.
touch video.txt
  • Paste the path to use the images for the video in video.txt. For example:
file '/Users/mac/dev/ffmpeg-tutorials/file1.jpg'
duration 4
file '/Users/mac/dev/ffmpeg-tutorials/file2.jpg'
duration 2
file '/Users/mac/dev/ffmpeg-tutorials/file3.jpg'
duration 2
  • Run this script to import all images and make a video from them:
ffmpeg -safe 0 -f concat -i video.txt -c:v libx264 \
-vf "scale=1080:1920:force_original_aspect_ratio=increase,crop=1080:1920" -pix_fmt yuv420p slideshow.mp4

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

  • In this line, we concat all images inside video.txt, and disable file safety using -safe 0. We also set the video encoder to libx264:
ffmpeg -safe 0 -f concat -i video.txt -c:v libx264
  • In this line, we will resize and crop all images to 1080x1920 while keeping their aspect ratio. We also add the pixel format to render images -pix_fmt yuv420p:
-vf "scale=1080:1920:force_original_aspect_ratio=increase,crop=1080:1920" -pix_fmt yuv420p

slideshow.mp4

Using named files

  • In this folder, we’ll have file1.jpg, file2.jpg, and file3.jpg. Instead of adding their path manually, we can use this method to add all of them:
ffmpeg -framerate 1 -i file%d.jpg -vf "scale=1080:1920:force_original_aspect_ratio=increase,crop=1080:1920" -c:v libx264 -pix_fmt yuv420p output.mp4

Let’s break down the code above.

  • In this line, we specify a frame rate of one frame per second, and import all of our files with file%d.jpg:
ffmpeg -framerate 1 -i file%d.jpg
  • In this line, we resize and crop all images to 1080x1920 while keeping their aspect ratio. Also, we specify the pixel format for rendering out images with -pix_fmt yuv420p:
-vf scale=1080:1920  -c:v libx264

Here is the output video from the FFmpeg command:

slideshow.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-slideshow
  • Initialize a Node.js project:
yarn init -y
  • Install the Editframe Node.js SDK:
yarn add @editframe/editframe-js
  • Create a create-video.js file to merge videos into one video:
const { Editframe } = require("@editframe/editframe-js");

const main = async () => {
  const editframe = new Editframe({
    develop: true,
    clientId: "YOUR_EDITFRAME_CLIENT_ID",
    token: "YOUR_EDITFRAME_TOKEN",
  });
  const composition = await editframe.videos.new({
    backgroundColor: "#000",
    dimensions: {
      height: 1920,
      width: 1080,
    },
  });
  const image1 = await composition.addImage(`${__dirname}/file1.jpg`, {
    trim: { end: 4 },
    size: { format: "fill" },
  });
  const image2 = await composition.addImage(`${__dirname}/file2.jpg`, {
    trim: { end: 2 },
    size: { format: "fill" },
  });
  const image3 = await composition.addImage(`${__dirname}/file3.jpg`, {
    trim: { end: 2 },
    size: { format: "fill" },
  });

  await composition.addSequence([image1, image2, image3]);

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

main();

Let’s dive into what the code in this file is doing.

  • Here, we initialize an Editframe instance with our Editframe Token (which we obtained by creating an Editframe application). We also set develop to true to open the output video in new tab when encoding has finished:
const editframe = new Editframe({
    develop: true,
    clientId: "YOUR_EDITFRAME_CLIENT_ID",
    token: "YOUR_EDITFRAME_TOKEN",
  });
const composition = await editframe.videos.new({
    backgroundColor: "#000",
    dimensions: {
      height: 1080,
      width: 1920,
    }
  });
const image1 = await composition.addImage(`${__dirname}/file1.jpg`, {
    trim: { end: 4 },
    size: { format: "fill" },
  });
  const image2 = await composition.addImage(`${__dirname}/file2.jpg`, {
    trim: { end: 2 },
    size: { format: "fill" },
  });
  const image3 = await composition.addImage(`${__dirname}/file3.jpg`, {
    trim: { end: 2 },
    size: { format: "fill" },
  });
await composition.addSequence([image1, image2, image3]);
const video = await composition.encodeSync();
console.log(video);
  • Run the video script:
node create-video

Here’s the output video using the Editframe API method:

editframe-slideshow.mp4

Note: You can also add transitions, filters, trim videos, and much more using the Editframe compositional API. Learn more about using Editframe at the Editframe API docs.

Comparison video between FFmpeg and Editframe API

Here is a comparison of the videos created with FFmpeg (left) and Editframe (right):

compare.mp4

© 2024 Editframe
Making video creation easier for software developers.