Video Player
A video player component with playback controls. Supports RTL layout. Press play to preview the active playback state.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { VideoPlayer } from 'sdaia-ui';5
Installation
npx sdaia-ui@latest add video-player
Usage
import { VideoPlayer } from "@/components/ui/video-player"<VideoPlayer />Examples
Default
Video player with playback controls. Press play to preview the active playback state.
Loading preview…
1
<VideoPlayer2
poster="..."3
posterAlt="Video thumbnail"4
title="Video 1"5
currentTime="0:12"API Reference
VideoPlayerProps
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 |
