Function: Video()

Video(srcOrOptions?: string | { align?: Align; blur?: number; brightness?: number; className?: string; color?: string; controls?: boolean; currentTime?: number; customPositioned?: boolean; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; fit?: ImageFit; height?: Size; id?: string; interactive?: boolean; loop?: boolean; muted?: boolean; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; playbackRate?: number; playing?: boolean; position?: Position; preload?: "metadata" | "none" | "auto"; rotation?: number; scale?: number; size?: Size; src?: string; style?: Properties<0 | string & object, string & object>; theme?: Partial<ThemeConfig>; volume?: number; width?: Size; x?: PositionCoord; y?: PositionCoord; }, maybeOptions?: object): VideoElement

Creates a reactive native Video player element on stage.

Parameters

Parameter	Type	Description
srcOrOptions	string | { align?: Align; blur?: number; brightness?: number; className?: string; color?: string; controls?: boolean; currentTime?: number; customPositioned?: boolean; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; fit?: ImageFit; height?: Size; id?: string; interactive?: boolean; loop?: boolean; muted?: boolean; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; playbackRate?: number; playing?: boolean; position?: Position; preload?: "metadata" | "none" | "auto"; rotation?: number; scale?: number; size?: Size; src?: string; style?: Properties<0 | string & object, string & object>; theme?: Partial<ThemeConfig>; volume?: number; width?: Size; x?: PositionCoord; y?: PositionCoord; }	-
maybeOptions	{ align?: Align; blur?: number; brightness?: number; className?: string; color?: string; controls?: boolean; currentTime?: number; customPositioned?: boolean; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; fit?: ImageFit; height?: Size; id?: string; interactive?: boolean; loop?: boolean; muted?: boolean; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; playbackRate?: number; playing?: boolean; position?: Position; preload?: "metadata" | "none" | "auto"; rotation?: number; scale?: number; size?: Size; src?: string; style?: Properties<0 | string & object, string & object>; theme?: Partial<ThemeConfig>; volume?: number; width?: Size; x?: PositionCoord; y?: PositionCoord; }	-
maybeOptions.align?	Align	-
maybeOptions.blur?	number	Blur in virtual pixels (default: 0).
maybeOptions.brightness?	number	Brightness multiplier (default: 1).
maybeOptions.className?	string	-
maybeOptions.color?	string	Foreground CSS color (default: component/theme color).
maybeOptions.controls?	boolean	Whether to show native browser video controls. Defaults to false.
maybeOptions.currentTime?	number	Initial or target playback position in seconds.
maybeOptions.customPositioned?	boolean	Whether this element manages its own CSS transform / positioning (disables stage translate3d).
maybeOptions.enterDelay?	number	Delay in seconds before entering scene transition begins.
maybeOptions.enterDuration?	number	Duration in seconds for entering scene transition.
maybeOptions.exitDelay?	number	Delay in seconds before exiting scene transition begins.
maybeOptions.exitDuration?	number	Duration in seconds for exiting scene transition.
maybeOptions.fit?	ImageFit	Sizing fit: "contain" (default)
maybeOptions.height?	Size	Height in stage units or CSS length (default: content size).
maybeOptions.id?	string	-
maybeOptions.interactive?	boolean	Whether clicking the video toggles play/pause interactively. Defaults to true when controls is false.
maybeOptions.loop?	boolean	Whether the video loops automatically when reaching the end. Defaults to false.
maybeOptions.muted?	boolean	Whether audio track is muted. Defaults to true (required for browser autoplay).
maybeOptions.onActivate?	() => void	-
maybeOptions.onDeactivate?	() => void	-
maybeOptions.onMount?	() => void	-
maybeOptions.onUnmount?	() => void	-
maybeOptions.opacity?	number	Whole-element opacity from 0 to 1 (default: 1).
maybeOptions.origin?	ElementAnchor	Which point of the element sits on its coordinate (default: "top-left").
maybeOptions.playbackRate?	number	Playback speed multiplier (e.g. 1.0, 1.5, 2.0). Defaults to 1.0.
maybeOptions.playing?	boolean	Whether the video is currently playing. Defaults to false.
maybeOptions.position?	Position	-
maybeOptions.preload?	"metadata" | "none" | "auto"	Preload policy: "metadata" (default)
maybeOptions.rotation?	number	Rotation in degrees (default: 0).
maybeOptions.scale?	number	Scale multiplier (default: 1).
maybeOptions.size?	Size	Both dimensions in stage units or CSS length (default: unset).
maybeOptions.src?	string	Video source URL or media asset path (optional if passed as first argument).
maybeOptions.style?	Properties<0 | string & object, string & object>	-
maybeOptions.theme?	Partial<ThemeConfig>	-
maybeOptions.volume?	number	Volume level from 0.0 (silent) to 1.0 (maximum). Defaults to 1.0.
maybeOptions.width?	Size	Width in stage units or CSS length (default: content size).
maybeOptions.x?	PositionCoord	Horizontal position in stage units (default: 0).
maybeOptions.y?	PositionCoord	Vertical position in stage units (default: 0).

Returns

VideoElement

Example

const demo = Video("./screencast.mp4", {
  x: "center",
  y: "center",
  scale: 0.8,
  muted: true,
  playing: false,
});

// In step:
demo.playing = true;