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);

Styling

You have full control over the styling of subtitles, including both the main text and highlighted words. Here's how to customize the styles:

Main Text Styling

To set the style for the underlying subtitle text, use the setMainTextStyle method:

Engine.getInstance().getSubtitlesManager().setMainTextStyle({
  fontSize: 20,
  color: "#FFFFFF",
});

Highlighted Word Styling

To customize the appearance of highlighted words, such as making them bold or changing their color:

Engine.getInstance().getSubtitlesManager().setHighlightStyle({
  fontWeight: "bold",
  color: "#FFFF00",
  strokeColor: "#000000",
});

Subtitle Display Modes

You can control how subtitles are displayed, such as showing the entire text and highlighting the active word, or revealing words as they are spoken. To set the subtitle display mode, use:

Engine.getInstance().getSubtitlesManager().setTextMode("partial");

Available modes include "full" (to show the complete text) and "partial" (to reveal words progressively).

Animations

Highlight animations for the active word can add more visual appeal to your subtitles. The SDK offers a variety of built-in animations to cover most use cases. To apply a highlight animation:

const speed = 1;
 
Engine.getInstance()
  .getSubtitlesManager()
  .setHighlightAnimation("wiggle", speed);

Here, speed controls how fast the animation plays.

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

TransitionClip