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,
});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-attachingSee Also
- Subtitles / Captions: styling, word timings, highlight animations.
- Clip API Reference
- API reference:
SubtitlesClip,Subtitles