Skip to main content

Adding Videos

You can integrate motion into a design by calling kittl.design.video.addVideo.

Videos in Kittl employ a playlist schema. You can specify a sequence of video clips or pass an array of a single clip depending on your needs.

Adding a Single Video​

Configure a playlist containing your video items and assign dimensions for bounding.

const videoResult = await kittl.design.video.addVideo({
    size: {
        width: 600,
        height: 400
    },
    position: {
        absolute: {
            left: 50,
            top: 50,
        },
    },
    playlist: [
        {
            id: 'video-src-id', // Object identifier of an uploaded or external video source
            objectName: 'Background Clip'
        }
    ]
});

if (videoResult.isOk) {
    console.log('Video element rendered:', videoResult.result);
}

Updating a Video​

Use updateVideo to modify an existing video's position, size, or visual properties.

// Reposition and resize
await kittl.design.video.updateVideo({
    videoId: 'video-id',
    position: { absolute: { left: 100, top: 200 } },
    size: { width: 800, height: 450 },
});

// Add border and shadow
await kittl.design.video.updateVideo({
    videoId: 'video-id',
    stroke: '#000000',
    strokeWidth: 2,
    shadowColor: '#00000080',
});

See Video API Reference for full parameter details.

Updating a Playlist Item​

Use updatePlaylistItem to replace the content of a specific clip within a video's playlist.

await kittl.design.video.updatePlaylistItem({
    videoId: 'video-id',
    playlistItemId: 'playlist-item-id',
    playlistItem: {
        objectName: 'new-video-source',
    },
});

See Video API Reference for full parameter details.

Removing a Playlist Item​

Use removePlaylistItem to delete a specific clip from a video's playlist.

await kittl.design.video.removePlaylistItem({
    videoId: 'video-id',
    playlistItemId: 'playlist-item-id',
});