Rendley SDK

Appearance

Video Clip ​

The VideoClip loads a video file and renders it on the canvas. It supports trimming, freeze frames, playback speed, and audio extraction.

Create a Video Clip ​

The duration is inferred from the media data, so you only need to specify the start time.

typescript
const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia("https://example.com/clip.mp4");

await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
});
List of Supported Formats
FormatSupport
MP4✅
MOV✅
AVI✅
WEBM✅
MKV✅
M3U8✅

Freeze a Frame ​

Pause the video on a specific frame for the rest of the clip duration with setFreezeTime. Useful for a poster frame or a hold at the end of a segment.

typescript
videoClip.setFreezeTime(2.0); // freeze at second 2
videoClip.setFreezeTime(); // unfreeze

Extract a Frame ​

Export the current frame of the video as a base64 image. extractFrameAsBase64Image takes an options object with mimeType and quality:

typescript
const image = await videoClip.extractFrameAsBase64Image({
  mimeType: "image/jpeg",
  quality: 0.9,
});

To capture a specific time rather than the current frame, seek first: Engine.getInstance().seek(1.5) then call extractFrameAsBase64Image. Or use Engine.getInstance().getFrameAsBase64Image(time, mimeType, quality) which accepts a time and works across the whole composition.

Extract the Audio Track ​

Split the audio onto a separate audio clip on another layer. The original video stays silent.

typescript
const audioClip = videoClip.extractAudioClip();

If you want a brand-new independent media entry (for example to reuse the audio without re-downloading), call Library.extractAudioFromMedia instead.

Playback Speed and Audio Fade ​

Speed, pitch preservation, volume, and volume fades are covered on the dedicated Playback Speed & Fades page.

See Also ​