Video Player

A video player component with playback controls. Supports RTL layout. Press play to preview the active playback state.

Loading demo: video-player-real-world

Installation

npx sdaia-ui@latest add video-player

import { VideoPlayer } from "@/components/ui/video-player"

<VideoPlayer />

Use surface="glass" to enable Glass Effect.

Loading demo: video-player-glass

Video player with playback controls. Press play to preview the active playback state.

Loading demo: video-player-default

Props for the VideoPlayer component.

Prop	Type	Default	Required
poster	string	-	optional
posterAlt	string	''	optional
title	string	-	optional
playing	boolean	-	optional
defaultPlaying	boolean	false	optional
progress	number	-	optional
defaultProgress	number	0	optional
currentTime	string	'0:00'	optional
duration	string	'0:00'	optional
onPlay	() => void	-	optional
onPause	() => void	-	optional
onPrevious	() => void	-	optional
onNext	() => void	-	optional
onProgressChange	(value: number) => void	-	optional
onVolumeClick	() => void	-	optional
onSettingsClick	() => void	-	optional
onFullscreenClick	() => void	-	optional
onMoreClick	() => void	-	optional
rtl	boolean	false	optional
src	string	—	optional