Image Clip

The Image Clip module allows for playback of Image content in various formats. As an extension of the Clip class, the Image Clip provides access to shared properties, enabling you to leverage the same features and methods as other clip types.

Example

Here's an example of how to work with a Image Clip:

1. To add an image file to your composition, first upload it to the library using:

const imageMediaId = await engine
  .getLibrary()
  .addMedia("https://example.com/path/to/your/image/file.jpg");

Note that this action returns a unique identifier for the uploaded asset, which can be reused across multiple clips.

In the example above, we imported the media from a URL. However, you can also use a File object, a URL, or a UInt8Array, providing flexibility in how you source your media.

2. By default, uploading an asset doesn't display it immediately. To show your image clip in a layer, create a new layer and add the clip using:

const imageLayer = engine.getTimeline().createLayer();
 
const imageClip = imageLayer.addClip({
  mediaDataId: imageMediaId,
  startTime: 0,
  duration: 10,
});

3. To play the composition including your image clip, use:

engine.play();

Supported Formats

Here is the list of all the supported formats:

To learn more about the ImageClip, its properties, and functions, visit the API Reference.