How to Add Subtitles to Your Video Using FFmpeg (Updated)

Published on July 1, 2023

Last updated on September 25, 2024

5 min read

It’s no secret that video content is eating the internet. These days, practically all social networks are video-forward spaces where clips and reels dominate the user feed. In order to get value out of a video, however, users need to know what is being said. Since most social networks mute videos in feeds by default, it’s up to creators to make sure their words come across to viewers.

Luckily, there’s a simple solution to this: Adding subtitles. Subtitles instantly make your videos more meaningful and accessible and are very likely to increase click-through and engagement rates.

This guide will show you two programmatic approaches to adding subtitles to a video—one using FFmpeg, and another leveraging the Editframe video API. With these skills under your belt, you’ll be able to do things like:

Improve page SEO by increasing your average time-on-page
Increase your overall video engagement
Make awesome lyric videos
Improve the conversion of video ads
Automate subtitle creation or video transcription at scale

Let’s do this.

File assets

Here is a sample video file provided by pexels.com(opens in a new tab) that we will use in this tutorial.

sample.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)

Using Filter complex:

First, let’s create an SRT file, example.srt, that will contain the subtitles for our video:

touch example.srt

1
00:00:00,000 --> 00:00:01,500
This an example subtitle

2
00:00:01,600 --> 00:00:02,500
<i>Italic style</i>

3
00:00:03,000 --> 00:00:15,000
Video by Tiger Lily on pexels.com

Here is the FFmpeg command that will sync our subtitles with our video:

ffmpeg -i sample.mp4 -vf "scale=1920:1080:force_original_aspect_ratio=increase,crop=1920:1080,\subtitles=example.srt:force_style='OutlineColour=&H100000000, /BorderStyle=3,Outline=0,Fontsize=20'" subtitle.mp4

Let’s break down what this command is doing.

Here, we import the sample.mp4 video file and example.srt SRT file, and resize/crop the output video to 1920x1080:

ffmpeg -i sample.mp4 -vf "scale=1920:1080:force_original_aspect_ratio=increase,crop=1920:1080,\

In this line, overwrite the default FFmpeg style for subtitles, and change the background color to black:

subtitles=example.srt:force_style='OutlineColour=&H100000000, /

Here, we will overwrite the border style to 3, enable the text outline color, and change the font size to 20px:

BorderStyle=3,Outline=1,Fontsize=20'" subtitle.mp4

Here is the output video using the FFmpeg command:

subtitle.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))
No need to have an .srt file for the subtitles (you can add subtitles directly to the video using the Editframe elements)

Let’s get started:

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

npx @editframe/create@beta

Install the required dependencies:

cd add-subtitle-video && npm install

Add assets to the project:

Add sample.mp4 files 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-[1920px] h-[1080px]">
      <ef-timegroup mode="contain">
        <ef-video src="/assets/sample.mp4"  id="audio"></ef-video>
        <ef-captions
          class="h-24 p-2 text-center text-4xl"
          target="audio"
        >
          <ef-captions-active-word
            style="
              animation: 0.1s fade-in ease-out forwards;
              animation-play-state: paused;
            "
          ></ef-captions-active-word>
        </ef-captions>
      </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-[1920px] h-[1080px" 
    >
    { /* 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 video element with an id of audio to use later on the captions element:

<ef-video src="/assets/sample.mp4"  id="audio"></ef-video>

ef-video is an Editframe element that allows you to add videos to your video composition.
In these lines, we import the captions element with a target of audio to add subtitles to the video:

Also, we add an active word element to highlight the current word being spoken in the video:

<ef-captions
  class="h-24 p-2 text-center text-4xl"
  target="audio"
>
  <ef-captions-active-word
    style="
      animation: 0.1s fade-in ease-out forwards;
      animation-play-state: paused;
    "
  ></ef-captions-active-word>
</ef-captions>

ef-captions is an Editframe element that allows you to add subtitles to your video.
ef-captions-active-word is an Editframe element that allows you to highlight the current word being spoken in the 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 from the Editframe API: