How to Trim, Cut, and Extract Your Video Clips Using FFmpeg (Updated)

Published on June 20, 2023

Last updated on September 25, 2024

6 min read

Cutting and trimming. It’s the story of a video editor’s life. Anyone whose job entails managing video content probably performs these two tasks more than any other editing process. While cutting and trimming are relatively basic tasks, they still demand precision and accuracy in order for videos to maintain a professional level of quality.

These tasks may not demand deep expertise to execute, but they can certainly be time-consuming if they have to be performed on a large volume of videos. In this tutorial, we’ll dive into two methods for programmatically trimming, cutting, and extracting video clips—one using the free video editing library FFmpeg, and another that uses the Editframe API. Ultimately, this tutorial will be critical for developing your video editing skills.

We’ll see how to trim the start, end, or middle of a video to create shorter segments, then take these shorter segments and stitch them together, or simply use the shorter clips as standalone content.

Here are just a handful of situations in which the skills you’ll learn in this tutorial would be extremely handy:

You need a short clip of a video to promote on social media
You’re a musician who needs a short promotional video clip
You’re a vlogger and you want to make quick promotional videos for Instagram posts or TikTok videos
You want to accomplish any of these editing tasks without using bulky desktop video editors like Final Cut or iMovie
You have lots and lots of videos to trim or cut, and better things to do with your life than sit in front of a video editor

Ready? Let’s go.

File assets

Here is a sample video file provided by pexels.com(opens in a new tab) 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(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 FFmpeg command to trim the video from a specific start and end time:

ffmpeg -ss 00:00:02 -to  00:00:05  \
 -i video.mp4 -c copy trim-1.mp4

Let’s break down what this code is doing.

In this line, we trim the video from the 2-second mark to the 5-second mark using this format 00:00:02:00 to 00:00:05:00:

ffmpeg -ss 00:00:02 -to  00:00:05

In this line, we import the video file, then copy the video and audio stream intro trim-1.mp4 :

-i video.mp4 -c copy trim-1.mp4

Here is the output video from the FFmpeg command:

trim-1.mp4

With start time and duration (FFmpeg)

Now let’s do the same thing, only this time we’ll specify a start time and a duration rather than a starting and ending timestamps. Here’s the FFmped command to do that:

ffmpeg -i video.mp4 \
-ss 00:00:02 -t 00:00:03 \
-c:v copy -c:a copy trim-2.mp4

You know the drill. Let’s break it down.

In this line, we import the video file:

ffmpeg -i video.mp4 \

Here, we trim the video from the 1-second mark, and specify a 3-second duration (this will extract the video from 00:02 to 00:05, and remove the rest):

-ss 00:00:02 -t 00:00:03 \

In this line, we import the video file and copy the video and audio streams into trim-2.mp4:

-c:v copy -c:a copy trim-2.mp4

Here is the output video from using the FFmpeg command:

trim-2.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
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 trim-video && npm install

Add assets to the project:

Add video.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" />
  </head>
  <body>
    <ef-timegroup mode="sequence" class="w-[1920px] h-[1080x] overflow-hidden">
      <ef-timegroup mode="contain">
        <ef-video
          class="w-full h-full object-center object-cover"
          sourcein="2s"
          sourceout="5s"
          src="/assets/video.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 this line, we create a new video composition using the ef-timegroup element. A vertical video (9:16) with a height of 1920px and a width of 1080px:

<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 to add the video and waveform elements:

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

In these lines, we import the video element:

<ef-video
    class="w-full h-full object-center object-cover"
    sourcein="2s"
    sourceout="5s"
    src="/assets/video.mp4"
  ></ef-video>

ef-video is an Editframe element that allows you to add videos to your video composition.
- sourcein and sourceout are the start and end times of the video clip that we want to extract.
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 .

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

Here is the output video from the Editframe API: