Video Item

Renders a video clip on the canvas. Supports trimming, volume control, borders, masks, and corner radius.

Creating a Video Item

const { addItem } = useStudio()

addItem('Video', {
  x: 0,
  y: 0,
  width: 1280,
  height: 720,
  itemProps: {
    src: 'https://example.com/clip.mp4',
    start: 0,
    end: 10,
    duration: 10,
  },
})

Properties

All properties below are passed inside itemProps.

Source & Timing

Property	Type	Description
src	string	URL of the video file. Required.
start	number	Trim start time in seconds. Required.
end	number	Trim end time in seconds. Required.
duration	number	Total duration of the source video in seconds. Required.
volume	number	Playback volume from 0 to 1.

Border & Radius

Property	Type	Description
borderColor	string	Border color.
borderWidth	number	Border thickness in pixels.
cornerRadius	number	Corner radius in pixels.

Shadow

Property	Type	Description
shadowEnabled	boolean	Enable or disable the shadow.
shadowColor	string	Shadow color.
shadowBlur	number	Shadow blur radius.
shadowOffsetX	number	Shadow horizontal offset.
shadowOffsetY	number	Shadow vertical offset.

Mask

Property	Type	Description
svgMask	{ path: string; viewBox: { x: number; y: number; w: number; h: number }; filename: string }	SVG shape used as a clip mask.

Trimming Example

addItem('Video', {
  x: 0,
  y: 0,
  width: 1280,
  height: 720,
  itemProps: {
    src: 'https://example.com/interview.mp4',
    start: 5,    // trim to start at 5s
    end: 15,     // trim to end at 15s
    duration: 60, // source video is 60s long
    volume: 0.8,
  },
})

Notes

• Video playback is synchronized with the timeline via usePlayer.
• start and end control the trim within the source video file.

Related

• usePlayer hook
• Audio item