Skip to content

Subtitles Clip

The SubtitlesClip renders time-synced captions on the canvas. It pulls its text from a Subtitles object stored in the Library, so multiple subtitles clips can share the same source.

See the full Subtitles / Captions guide for styling, text modes, word timings, highlight animations, and the parser for SRT files. This page covers only the clip itself.

Create a Subtitles Clip

typescript
const subtitles = new Subtitles({
  textBlocks: [
    { text: "Hello", time: 0, duration: 1 },
    { text: "World", time: 1, duration: 1 },
  ],
});

const subtitlesId = Engine.getInstance().getLibrary().addSubtitles(subtitles);

const subtitlesClip = new SubtitlesClip({ subtitlesId });
await layer.addClip(subtitlesClip);

Engine.getInstance().getSubtitlesManager().setPosition(960, 540);
Engine.getInstance().getSubtitlesManager().setMainTextStyle({
  fontSize: 140,
  color: "#FFFFFF",
  fontWeight: "900",
  strokeColor: "#000000",
  strokeThickness: 4,
});
Idle

Attach Subtitles to an Existing Clip

When you want the subtitles to move, trim, and mute alongside a specific video or audio clip:

typescript
clip.setSubtitles(subtitlesId, 0); // id + offset in seconds
clip.setSubtitlesOffset(0.5); // shift without re-attaching

See Also