Subtitles Clip

The Subtitles Clip is responsible for drawing and syncing subtitles or captions with your video content.

Adding Subtitles Manually

When adding subtitles manually, you need to define a Subtitles object, which contains a list of text blocks. Each text block specifies the text content, the start time, and the duration, all in seconds.

import { Engine, Subtitles, SubtitlesClip } from "@rendley/sdk";
 
// Create the subtitles structure
const subtitles = new Subtitles({
  textBlocks: [
    {
      text: "Hello",
      time: 0,
      duration: 1,
    },
    {
      text: "World",
      time: 1,
      duration: 1,
    },
  ],
});
 
// Store subtitles in the library
const subtitlesId = Engine.getInstance().getLibrary().addSubtitles(subtitles);
 
// Create the subtitles clip
const subtitlesClip = new SubtitlesClip({
  subtitlesId: subtitlesId,
});
 
// Add the subtitles clip to a layer
const layer = Engine.getInstance().getTimeline().createLayer();
await layer.addClip(subtitlesClip);

Importing Subtitles from SRT

When importing subtitles from an SRT file, the SDK can automatically parse the SRT string and construct the corresponding Subtitles object.

import { Engine, Subtitles, SubtitlesClip } from "@rendley/sdk";
 
const srtContent = `
1
00:01:17,757 --> 00:01:18,757
Hello World!
`;
 
// Convert the SRT content to a Subtitles object
const subtitles = Engine.getInstance()
  .getSubtitlesManager()
  .convertSRTToSubtitles(srtContent);
 
// Store subtitles in the library
const subtitlesId = Engine.getInstance().getLibrary().addSubtitles(subtitles);
 
// Create the subtitles clip
const subtitlesClip = new SubtitlesClip({
  subtitlesId: subtitlesId,
});
 
// Add the subtitles clip to a layer
const layer = Engine.getInstance().getTimeline().createLayer();
await layer.addClip(subtitlesClip);

Connecting Subtitles with Clips

In some cases, you may want the subtitles to be directly attached to a specific clip so that they move or trim in sync with that clip. Here's how you can do it:

// Store subtitles in the library
const subtitlesId = Engine.getInstance().getLibrary().addSubtitles(subtitles);
 
// Attach subtitles to a clip
clip.setSubtitles(subtitlesId);

To make the subtitles appear after a delay, use the setSubtitlesOffset method, passing the offset value in seconds.

clip.setSubtitlesOffset(value);

For a comprehensive list of all supported properties and methods, be sure to check out the API Reference.

Lottie ClipCustom Clip