Video Player
DisplayMITHTML5 video player with custom controls, scrubber, volume, fullscreen, and chapters.
bun add @otfdashkit/ui
Preview
Video PlayerDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { VideoPlayer } from '@otfdashkit/ui'
const SAMPLE_SRC =
'https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4'
const SAMPLE_POSTER =
'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg'
export function Example() {
return (
<div className="w-[800px]">
<VideoPlayer src={SAMPLE_SRC} poster={SAMPLE_POSTER} />
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the VideoPlayer source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| srcrequired | string | ||
| chapters | VideoChapter[] | Optional chapter markers + dropdown list. | |
| className | string | ||
| containerClassName | string | Wrapper class — override the default `aspect-video`. | |
| controls | boolean | true | Default true. False hides the bottom control bar (hero loops). |
| onEnded | ReactEventHandler<HTMLVideoElement> & (() => void) | ||
| onPause | ReactEventHandler<HTMLVideoElement> & (() => void) | ||
| onPlay | ReactEventHandler<HTMLVideoElement> & (() => void) | ||
| onTimeUpdate | ReactEventHandler<HTMLVideoElement> & ((time: number, duration: number) => void) | ||
| poster | string |