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,
    },
    playlist: [
        {
            id: '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({
    boardId: addResult.result.id,
    playlistItem: {
        id: 'new-video-source-id',
        objectName: 'Background Reel'
    }
});