Creating a Scene From an Initial Video URL

In this example, we will show you how to initialize the CreativeEditor SDK with an initial video.

Explore a full code sample on Stackblitz or view the code on Github.

Starting from an existing video allows you to use the editor for customizing individual assets. This is done by using engine.scene.createFromVideo(url: string): Promise<number> and passing a URL as argument.

Specify the source to use for the initial video. This can be a relative path or a remote URL.

We can retrieve the graphic block id of this initial video using cesdk.engine.block.findByType(type: ObjectType): number[]. Note that that function returns an array. Since there's only a single graphic block in the scene, the block is at index 0.

We can then manipulate and modify this block. Here we modify its opacity with cesdk.engine.block.setOpacity(id: number, opacity: number): void. See Modifying Scenes for more details.

When starting with an initial video, the scene's page dimensions match the given resource and the scene is configured to be in pixel design units.

To later save your scene, see Saving Scenes.


import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.24.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.24.0/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  await engine.scene.createFromVideo(
    'https://img.ly/static/ubq_video_samples/bbb.mp4'
  );

  // Find the automatically added graphic block in the scene that contains the video fill.
  const block = engine.block.findByType('graphic')[0];

  // Change its opacity.
  engine.block.setOpacity(block, 0.5);

  // Start playback
  engine.block.setPlaying(engine.scene.get(), true);

  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});