Adding Videoboards

Videoboards act as a specialized container for a video-centric workflow, holding video objects effectively in a timeline format. Utilize kittl.design.videoboard to work with them.

Adding a Videoboard

Creating a videoboard is similar to adding standard boards, but includes a playlist for the initial video configuration.

const addResult = await kittl.design.videoboard.addVideoboard({
    position: {
        absolute: {
            left: 100,
            top: 100,
        }
    },
    size: {
        width: 1920,
        height: 1080,
    },
    video: {
        playlist: [{ objectName: 'video-source-id' }],
    }
});

if (addResult.isOk) {
    console.log('Videoboard created successfully:', addResult.result);
}

Modifying Videoboards

After a videoboard is created, you can interact with its playlist using setVideoOnVideoboard to entirely reset the video, or updatePlaylistItem / removePlaylistItem to handle individual clips.

// Replace the main video on the videoboard
const setVideoResult = await kittl.design.videoboard.setVideoOnVideoboard({
    videoBoardId: 'videoboard-id',
    video: {
        playlist: [{ objectName: 'new-video-source-id' }],
    }
});

Updating Board Properties and Clips

kittl.design.videoboard.updateVideoboard() takes videoBoardId and optional size and generationSettings. Use UpdateVideoboardParams for board properties.

To edit a clip, use kittl.design.videoboard.updatePlaylistItem() with videoBoardId, playlistItemId, and playlistItem. To remove a clip, use kittl.design.videoboard.removePlaylistItem() with videoBoardId and playlistItemId.

See UpdatePlaylistItemParams and RemovePlaylistItemParams for this release's clip fields.