Video and Audio Timeline Web Editor

This tutorial focuses on the user interface components. For programmatic timeline manipulation, refer to the Video Overview guide.

When to Use#

Use the CE.SDK timeline features in web applications that incorporate the following tools:

• Video montages
• Marketing video editing
• Social media content creation

What You’ll Learn#

This tutorial will show you how to:

• The video timeline works.
• To create video scenes.
• To manage video layers (tracks).
• To edit a clip’s duration and offset.
• To manage video playback.
• To generate and display video thumbnails.

How the Timeline Works#

This tutorial refers to the timeline, which is the horizontal area below the video editing canvas. The video timeline displays:

• All clips on parallel tracks
• A playhead for navigation
• Controls for playback and editing

Use the visual timeline for editing actions like:

• Arranging clips along a time axis to control when each element appears.
• Trimming clips to change their duration.
• Layer content visually.

Activate CE.SDK Video Mode#

To work with the CE.SDK Editor in video mode, specify the scene’s design as follows:

cesdk.addDefaultAssetSources(),
cesdk.addDemoAssetSources({ sceneMode: 'Video' }),
await cesdk.createVideoScene();

This tells the CreativeEditor:

• To use the Video editing mode (rather than the Design one).
• To load demo video assets to test the editor.
• To create a video scene, ready for editing.

Open/Close the Timeline Editing area#

The default CreativeEditor settings display the timeline when launching the UI.

Close it to increase canvas space when the scene doesn’t need timeline editing. To close it, click the Timeline toggle:

To open it and access the visual timeline editing tools, click the same toggle:

Timeline Structure#

The timeline’s structure in the CE.SDK is the following:

1. Scene (root block)
2. Pages (as video segments)
3. Tracks (as parallel layers)
4. Clips (as graphic blocks)

Track Structure#

The track is a container that handles the content layer. The timeline organizes content into three track types:

• Clip tracks (for video content)
• Overlay track (for text and graphics over the video)
• Audio tracks

The order in which track appears determines its position in the scene:

• Moving a track to the top brings it to the front of the scene.
• Moving a track to the bottom of the timeline sends the content the back of the scene.

Control the Content Position#

You can adjust the position of the content using the vertical playhead line, which indicates the current playhead time. The playhead moves along the timeline, displaying the time code.

Change the playhead position (when the clip starts playing) by either:

• Clicking on any area in the time ruler.
• Dragging the playhead with your cursor.

Scroll and Zoom on the Timeline#

Adjust the time scale to increase the level of details per frame:

1. Click anywhere in the timeline area.
2. Zoom into the timeline using:
   • Keyboard shortcuts
   • A mouse
   • A trackpad

When zoomed in, the clip stretches visually—each pixel now represents fewer milliseconds—so you can fine-tune edits frame by frame.

Control How the Clips Play#

Play/Pause the Scene#

The playback bar contains:

• The play/pause button that plays the clip from the current playhead position.
• A loop toggle that repeats the video when activated.
• The current timestamp

The scene plays while synchronizing:

• All videos
• Overlays
• Audio

Preview Frames#

Drag and drop (scrub) the playhead back and forth to preview frames without playing the clip in real time. This allows you to quickly find the exact moment you want to edit.

The timestamp is the current playhead time in HH:MM:SS:FF format.

Edit Video Clips#

The CreativeEditor’s timeline allows users to visually edit clips and scenes in the browser. This section lists all timeline editing features.

Select Clips#

Before editing any clip, you need to select it to apply modifications to it. To select a clip, click it either:

• From the page
• From the timeline

Selecting multiple clips at once is available either:

• With cursor clicks on each clip while holding modifier keys.
• By drawing a frame in the scene with the cursor.

Selecting a clip reveals editing handles to:

• Crop the clip.
• Flip the clip.
• Trim the clip.

Edit Clip’s Duration#

In the timeline, selected clips show drag handles at their beginning and end. Use these handles based on your goals:

• Trim the clip from the beginning: use the left handle (at the start of the clip).
• Trim the clip from the end: use the right handle (at the end of the clip).

This operation is called “trimming” a clip. As you move the clip, its position on the timeline automatically updates. Trimming shortens the clip, and the cut portions:

• Don’t play anymore.
• Disappear from the timeline.

Split Clips#

The Split Control splits the selected clip into two separate clips at the playhead.

Each resulting clip is then independently editable. Splitting doesn’t remove any part of the original content.

Add Content to the Scene#

Once you’ve edited the clips, you can add more elements to the scene to customize it further, such as:

• Additional clips
• Audio tracks
• Graphics and text

Add Another Clip#

The web version of the CreativeEditor allows you to add more clips to the scene in two ways:

• By clicking the “Add Clip” button:

  1. Opens the video assets gallery.
  2. Automatically adds any selected clips from the gallery to the timeline.

• By dragging and dropping from your computer to either:

  1. The page
  2. The timeline

Dragging the clip highlights the zone before dropping it.

The choice of the zone makes no difference: the clip’s position is automatically set at the beginning of the timeline. You can then reposition and edit it as needed.

Add Audio and Overlays#

Furthermore, there are two types of content that you can incorporate into the setting:

• Overlays (text, images, stickers)
• Audio

Add the new content to the scene by either:

• Clicking the kind of content to add from the lateral menu.
• Using the drag and drop feature from your computer or another source.

Each type of content appears automatically on its own track, at the start of the timeline.

Arrange Clips#

Use the CreativeEditor UI’s timeline to edit:

• The order in which clips appear.
• Each clip starting point.
• Using advanced settings.

Reorder Clips#

Drag clips along the horizontal axis to move them earlier or later in the timeline. This makes a clip’s order relative to the other clip change.

The CreativeEditor enhances visual clip arrangement in the timeline by:

• Auto-adjusting positions to prevent overlapping clips on the same track.
• Showing the clip’s predicted position using drop indicators.

Edit the Clip’s Starting Point#

Each clip’s position along the horizontal axis indicates its start time in the composition. To change the start time of a clip, drag it either:

• Left to make it start earlier.
• Right to make it start later.

Gaps between clips display as empty frames showing the background color when the scene plays.

Change the Background color#

To change the background color, click the Background button on the left side of the play bar.

This action opens a full color editing menu to customize:

• Color settings (RGB, CMYK, Hex, Hue)
• Transparency
• Solid or gradients
• Color picking from the scene

This menu provides an option to deactivate the background as well. Deactivating the background makes the scene play on a transparent background.

Configure the Timeline#

Activate/Deactivate the Timeline#

The CreativeEditor SDK ships a UI with the timeline editor activated. To change the settings and deactivate the timeline , use the ly.img.video.timeline feature flag:

// Enable the timeline (default for video scenes)
cesdk.feature.enable('ly.img.video.timeline');

// Disable the timeline for a simplified interface
cesdk.feature.disable('ly.img.video.timeline');

// Only show timeline when in Video mode (this is the default behavior)
cesdk.feature.set('ly.img.video.timeline', ({ engine }) => {
  return engine.scene.getMode() === 'Video';
});

cesdk.feature.set('ly.img.video.controls.split', ({ engine }) => {
  const selected = engine.block.findAllSelected();
  return selected.length === 1;
});

Hide or Show Tracks#

Simplify the CreativeEditor interface by leveraging the track visibility settings. Hide or display tracks based on specific use cases.

cesdk.feature.enable('ly.img.video.clips');

cesdk.feature.disable('ly.img.video.clips');

cesdk.feature.enable('ly.img.video.overlays');

cesdk.feature.disable('ly.img.video.overlays');

cesdk.feature.enable('ly.img.video.audio');

cesdk.feature.disable('ly.img.video.audio');

cesdk.feature.enable([
  'ly.img.video.clips',
  'ly.img.video.overlays',
  'ly.img.video.audio'
]);

cesdk.feature.disable([
  'ly.img.video.clips',
  'ly.img.video.overlays',
  'ly.img.video.audio'
]);

Configure the Play Bar#

Simplify the play bar by hiding or displaying controls in the UI:

cesdk.feature.enable('ly.img.video.controls.playback');

cesdk.feature.disable('ly.img.video.controls.playback');

cesdk.feature.enable('ly.img.video.controls.loop');

cesdk.feature.disable('ly.img.video.controls.loop');

cesdk.feature.enable('ly.img.video.controls.timelineZoom');

cesdk.feature.disable('ly.img.video.controls.timelineZoom');

Fine-tune Editing Actions#

Restrict or allow editing actions by hiding or displaying the editing controls:

cesdk.feature.disable('ly.img.video.controls.split');

cesdk.feature.disable('ly.img.video.addClip');

cesdk.feature.disable('ly.img.video.controls.background');

// Enable all video features
cesdk.feature.enable('ly.img.video.*');

// Disable all video control features
cesdk.feature.disable('ly.img.video.*');

Activate Features Dynamically#

You can activate or deactivate timeline features dynamically, instead of hard-coding their on/off state.

The following example detects the scene state:

• When a clip is selected, it activates the Split button.
• When nothing is selected, it hides the Split button.

// Disable split control when nothing is selected
cesdk.feature.set('ly.img.video.controls.split', ({ engine }) => {
  const selected = engine.block.findAllSelected();
  return selected.length === 1;
});

Feature Reference#

Troubleshooting#

Next Steps#

• Trim Video Clips — Detailed trimming techniques, including frame-accurate editing.
• Control Audio and Video — Master volume, playback speed, and timing.
• Activate or Deactivate Features - Full feature flag reference.
• Compress and Export the Video .