Subtitles

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

Runnable example

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

Full runnable example

import { Engine, Subtitles, SubtitlesClip } from "@rendley/sdk";

await Engine.getInstance().init({
  license: {
    licenseName: "DOCS_PLAYGROUND",
    licenseKey: "DOCS_KEY",
  },
  display: {
    width: 1920,
    height: 1080,
    backgroundColor: "#000000",
    view: document.getElementById("rendley-canvas") as HTMLCanvasElement,
  },
});

const layer = Engine.getInstance().getTimeline().createLayer();

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

await Engine.getInstance().getTimeline().play();

Attach Subtitles to an Existing Clip

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

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

See Also

Subtitles / Captions: styling, word timings, highlight animations.
Clip API Reference
API reference: SubtitlesClip, Subtitles