Video Elements
VIDEO elements place remote video clips on the project timeline. They support source trimming, playback speed, volume, filters, crop, chroma key, resize, zoom, animations, and video-to-video transitions.
Interface
interface VideoItem {
type: "VIDEO";
src: string;
id?: string;
x?: number;
y?: number;
width?: number;
height?: number;
anchor?: Anchor;
position?: PositionPreset;
resize?: "contain" | "cover";
enterBegin?: number;
enterEnd?: number;
exitBegin?: number;
exitEnd?: number;
track?: number;
opacity?: number;
angle?: number;
flipV?: boolean;
flipH?: boolean;
zoom?: boolean;
enterAnimation?: XFadeEffect | null;
exitAnimation?: XFadeEffect | null;
cropParams?: CropParams;
chromaKey?: ChromaKey;
filter?: FilterOptions;
videoBegin?: number;
videoEnd?: number;
videoDuration?: number;
volume?: number;
speed?: number;
frameRate?: number;
transition?: XFadeEffect | null;
transitionDuration?: number;
transitionId?: string;
}
Required Fields
| Property | Type | Notes |
|---|---|---|
type | "VIDEO" | Case-insensitive in API validation. |
src | string | Remote http or https URL. |
Common Property Reference
| Property | Quick notes | Full reference |
|---|---|---|
position | Preset placement such as center-center. | PositionPreset |
anchor | Transform origin for placement and rotation. | Anchor |
resize | contain or cover. | ResizeMode |
zoom | Center-based zoom during visible duration. | zoom |
filter | Brightness, contrast, blur, tint, and related effects. | FilterOptions |
cropParams | Pixel crop rectangle. | CropParams |
chromaKey | Remove pixels matching a color. | ChromaKey |
| animations and transitions | Xfade effect names for enterAnimation, exitAnimation, and transition. | XFadeEffect |
Timeline And Source Timing
| Property | Default | Notes |
|---|---|---|
enterBegin, enterEnd | 0 | Timeline entrance timing. |
exitBegin, exitEnd | project.duration | Timeline exit timing. |
videoBegin | 0 | Start offset inside source media. |
videoEnd | project or source duration | End offset inside source media. |
videoDuration | project or source duration | Source clip duration hint. |
Audio And Playback
| Property | Default | Range |
|---|---|---|
volume | 1 | 0 to 1 |
speed | 1 | 0.1 to 10 |
frameRate | source/project frame rate | integer 1 to 60 |
Set volume: 0 on video clips when you want to replace source audio with tracks from audios.
Transitions
Transitions are available only between VIDEO elements. Add id to the target clip and set transition, transitionDuration, and transitionId on the clip that starts the transition.
[
{
"type": "VIDEO",
"id": "intro",
"src": "https://cdn.pixabay.com/video/2025/03/12/264272_large.mp4",
"resize": "cover",
"enterBegin": 0,
"exitEnd": 5,
"transition": "fade",
"transitionDuration": 1,
"transitionId": "main"
},
{
"type": "VIDEO",
"id": "main",
"src": "https://cdn.pixabay.com/video/2025/05/01/275983_large.mp4",
"resize": "cover",
"enterBegin": 5,
"exitEnd": 10
}
]
The next clip's id must match transitionId. Keep the handoff timing coordinated: the first clip's exitEnd should align with the next clip's enterBegin for the documented transition pattern.
Supported Effects
Video supports filter, cropParams, and chromaKey. Video does not support radius.
Examples
Simple Video
{
"type": "VIDEO",
"src": "https://cdn.pixabay.com/video/2025/06/03/283533_large.mp4",
"resize": "cover",
"volume": 0
}
Trimmed Clip
{
"type": "VIDEO",
"src": "https://cdn.pixabay.com/video/2025/06/03/283533_large.mp4",
"videoBegin": 5,
"videoEnd": 25,
"volume": 0.8,
"width": 1920,
"height": 1080,
"enterBegin": 0,
"exitEnd": 20
}
Picture In Picture
{
"type": "VIDEO",
"src": "https://cdn.pixabay.com/video/2025/05/01/275983_large.mp4",
"videoBegin": 10,
"videoEnd": 30,
"width": 300,
"height": 200,
"position": "bottom-right",
"volume": 0.3,
"track": 10
}
Formats
Input video assets are remote URLs and are checked before rendering. Output video formats are limited to mp4, mov, avi, and webm.