If you built a product, chances are you want people to know about it and start using it, too. And if you are in the business of selling something to consumers, placing video ads on websites is a very effective way to go about that.

When it comes to making video ads — and this of course holds true in general — the smallest things can often make the biggest difference. Even something as seemingly unimportant as adding subtitles to your video could be that thin line between a succesful and a failed advert.

Over time, it has been proven that advertisement videos with subtitles have higher engagement rates compared to those without. With browsers often starting videos muted, captions are a great way to capture an audience's attention and get your message across.

Now, there are two ways to caption a video, you can use Closed Captions or Open Captions. Closed indicates that the captions are not visible until activated by the viewer. Open, "burned-in", "hard-coded", or "baked on" captions, on the other hand, are visible to all viewers at all times, and can't be disabled. The subtitles are made up of pixels in the actual video itself.

While there are many advantages to Closed Captions (the viewer can select their appropriate language or choose to opt out) there are also interesting use cases for open caption. A particular one I'd like to be focus on here is running advertisements in a scenario where you can't always rely on player compatibility, but you still want to make sure your message gets across.

Manually burning subtitles into a video can be a huge headache, especially if you have a large archive of videos to caption. Luckily, the team at Transloadit has your back! We are proud to present to you our brand-new and shiny /video/subtitle Robot.

Our /video/subtitle Robot can be used in combination with other Robots, to create powerful workflows unique to your use case.

The subtitle Robot adding subtitles to a video.

Burning subtitles into videos

If you want to burn subtitles into a video, the first step would be to provide both the video and the subtitle file to our Robot. While there is a plethora of ways to do this, I will demonstrate the following two:

Using the /http/import Robot

Let's look at how to burn subtitles into an example video using the /http/import Robot.

To get started, we need a video and a subtitle file. If you do not have a subtitle file yet, create a file named subtitle.srt and add:

1
00:00:00,000 --> 00:00:22,000
Hi! : )
These subtitles were 'burned' into this video,
by supplying an SRT and an MP4 file to our /video/subtitle Robot.
Kind regards from Transloadit! : )

In the code block above, we have created subtitles that will run between the beginning of a video and the 22-second mark. Next, we will make the file available via a public URL, so our /http/import Robot can import it.

Now we can create our Assembly Instructions, supplying both our video and subtitle files to be burned. Take a look at the Assembly Instructions below:

{
  "steps": {
    "mp4_imported": {
      "robot": "/http/import",
      "url": "/assets/demos/inputs/surf.mp4"
    },
    "srt_imported": {
      "robot": "/http/import",
      "url": "https://s3.amazonaws.com/samuelo-testaws/subtitle.srt"
    },
    "subtitled": {
      "robot": "/video/subtitle",
      "preset": "ipad-high",
      "use": {
        "steps": [
          { "name": "mp4_imported", "as": "video" },
          { "name": "srt_imported", "as": "subtitles" }
        ]
      }
    },
    "exported": {
      "use": ["subtitled"],
      "robot": "/s3/store",
      "credentials": "s3_cred"
    }
  }
}

In the code block above, we have used the /http/import Robot to import two different files, then declared a subtitled Step, where we specified which of the imported files is the video and which is the subtitle file, i.e., the /video/subtitle Robot's use parameter. Next, we export the results to our S3 bucket. The s3_cred refers to the Template Credentials that I have securely stored before, and contains both the bucket name and the access keys.

Using the /upload/handle Robot

Alternatively, we could be using the /upload/handle Robot to get either the video or subtitle file to Transloadit. We do not define multiple upload points as the /upload/handle Robot can handle multiple uploads in one instance. The files form different fields in a multipart upload. Because of this, in our subtitled Step, we need to define which fields contain our video and our subtitle file.

Here, our Assembly Instructions should look like this:

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "subtitled": {
      "robot": "/video/subtitle",
      "preset": "ipad-high",
      "use": {
        "steps": [
          { "name": ":original", "fields": "video", "as": "video" },
          { "name": ":original", "fields": "subtitle", "as": "subtitles" }
        ]
      }
    },
    "exported": {
      "use": ["subtitled"],
      "robot": "/s3/store",
      "credentials": "s3_cred"
    }
  }
}

"fields" within use filters are the input field by the name attribute. So, in order to make this work, we would need to add an <input type="file" name="subtitle" /> to our form (and one with name="video"). For non-browser SDKs, this translates to adding files as follows: transloadit.addFile('video', './file.mp4').

Viewing results

Here is what our video looked like before burning subtitles to it:

And here it is after burning subtitles:

Conclusion

As I hope to have shown in this introduction, burning subtitles into video files doesn't have to be hard or time-consuming at all, when using our /video/subtitle Robot. With Transloadit, you never have to worry about dealing with FFmpeg, scaling a fleet of machines, or tying it into other media processing jobs. We've been perfecting that part for the past nine years, so you can focus on your business.

Happy burning! 🔥 And if you have questions, comments or concerns, do let us know!