How to Create Videos with Auto Subtitles in One API Request
Contents
The Bannerbear Video API features auto speech transcription which makes it super fast to create videos featuring your own custom branding, with embedded auto-generated subtitles.
Looking for a tutorial on doing a basic overlay? Read this tutorial instead
Video subtitles are an essential addition to social media video clips. 85% of Facebook content is watched in silence. That means if you've recorded a video for social media and you haven't embedded full subtitles, it's quite likely that 85% of people will scroll past it without ever knowing what you said.
What the Bannerbear Video API can do
The Bannerbear Video API features a fully-automated speech transcription feature that does all of the following in a single automated API request:
- Takes your source video (can be any aspect ratio)
- Applies a preset template which you have full design control over e.g. add your company logo, add today's date etc etc
- Transcribes the audio to text and splits it up across different screens
- Renders the video for you!
Example
This example was created in a single API request - Bannerbear imported a source video, did the necessary work in the background and then output this video with embedded subtitles.
Using the Bannerbear Video API you can pass in variables (in this case an avatar and a video url) to the API and Bannerbear will generate a new auto-subtitled video based on a template you have created. You have full flexibility over how these templates look - you can create any aspect ratio, add multiple overlay objects, use custom fonts, add your logo… etc!
Basic Concepts
If you've used Bannerbear to generate images already, then you will already know some of these basics.
Full API Documentation
You can read through the Bannerbear API Documentation which covers generating both Images and Videos.
Every Template is an API
In Bannerbear, every template you design becomes an API. You can then use that API to generate images / videos from the template. When generating images you'll be using the /images endpoint, when generating videos you'll be using the /videos endpoint.
Video Templates are just Templates!
There is no special editor for creating video templates, you just use the standard Bannerbear template editor. Video templates are actually the same thing as regular templates - your video media simply fills the entire background space. This means that essentially any of your existing templates can be a video template, as long as there isn't something covering the entire background.
The only thing to bear in mind is that if you are using the auto-transcribe feature, your template must have a text layer so that Bannerbear knows where to put the subtitles.
So to create a video template with transcription, the workflow looks like:
- Design a "regular" template, ensuring you add at least one text layer
- Create a Video Template, choosing (1) as the base
- Start generating videos!
In this tutorial we are going to walk through these basic steps to help you get an understanding of how the Bannerbear API works.
Adding the Sample Template
For the purposes of this tutorial I have prepared a really simple example video template. As I mentioned previously, essentially any Bannerbear template can become a video template so you don't have to use this specific template for this tutorial, but it keeps things easy to follow.
Add the Simple Video Example template to one of your projects:
The template will get added to the project you chose:
Creating a Video Template from a Template
The template gets added to your project as a standard Bannerbear template. This means at this point, all it can do is generate images - there is one more step for videos.
This is perhaps the most important takeaway from this tutorial. In order to start generating videos, you have to Create a Video Template based on this new template. It's a simple one-click process.
In your project's Home page you will see the Simple Video Example in the Templates section:
Scroll down until you see the Video Templates section and click Create a Video Template:
Choose your Simple Video Example template and choose Transcribe as the build pack. Think of "Build Packs" as a set of video behaviors / animation rules. There will be more Build Packs to choose from in the future. Hit Save.
Transcribe Settings
Video Templates using the Transcribe build pack need a few settings before you can start auto-generating videos.
The next screen you will see is the build pack settings page.
There are two important settings here.
One is the number of words per screen - you can change this to your liking and it will affect how Bannerbear splits up the text into different frames. Leave this as is for now - you can try changing this setting later to see how it affects the output.
The other is to specify which layer of your template you would like Bannerbear to insert the subtitles into. So when you are designing your own templates, name the subtitle layer something obvious (like "subtitles") and then choose that layer on this settings screen.
For this tutorial, the Simple Video Example template features a text layer called "text" so choose that. Leave the Approval Setting as "Render Immediately". Hit save.
Using the Sample Data Panel
You will now be on your new Video Template API test screen. It looks a lot like the Image Template screen but you can tell the difference as the Video Build Pack Transcribe is displayed in the title:
Click the API Console button to skip down to the API console. Hit the Sample Data button to open the sample data panel.
This should look pretty familiar to you if you've used the Image API before. It's the same, except this time the API console hits the /videos endpoint and the sample data panel has some video-related sample video and audio files that you can use in your tests.
One thing to note here is that Bannerbear doesn't show the text transcription layer you chose earlier, in the API console. This is because Bannerbear will use that layer internally, to insert subtitles into. When using the Transcribe build pack, Bannerbear will ignore any modifications you send into this layer as it is a reserved layer.
Rendering the Video
Choose some sample data - all this does is populate the API console with some presets. If you have your own test data you can paste it directly into the API console :)
Hit Send API Request!
Your video will start transcribing and then rendering. Total time to complete will depend on the complexity of your video, but if you're just rendering a test video based on the sample data, it should take less than a minute.
The page will update when the process has finished:
Boom! A fresh video rendered by Bannerbear, using the parameters you defined in the API console, with auto-generated subtitles. Try using a different input_media_url to see a different result. Also you can try going back to your build pack settings and change the Approval Setting to Require Manual Approval to see a different workflow where you can edit the transcript before the video gets rendered:
Conclusion
The Bannerbear Video API using the Transcribe build pack is a powerful way to auto-generate branded, subtitled video content.
Oh and… more #nocode tools for video are on the way! Video already fully supports Zapier, so if you have a Zapier account give the Bannerbear integration a try.
API Documentation
You can read through the Bannerbear API Documentation which covers generating both Images and Videos.
