Skip to content

Video Player

DisplayMIT
View in Storybook

HTML5 video player with custom controls, scrubber, volume, fullscreen, and chapters.

bun add @otfdashkit/ui

Preview

Video Player
Loading Storybook preview…

Code

import { 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.

PropTypeDefaultDescription
srcrequiredstring
chaptersVideoChapter[]Optional chapter markers + dropdown list.
classNamestring
containerClassNamestringWrapper class — override the default `aspect-video`.
controlsbooleantrueDefault true. False hides the bottom control bar (hero loops).
onEndedReactEventHandler<HTMLVideoElement> & (() => void)
onPauseReactEventHandler<HTMLVideoElement> & (() => void)
onPlayReactEventHandler<HTMLVideoElement> & (() => void)
onTimeUpdateReactEventHandler<HTMLVideoElement> & ((time: number, duration: number) => void)
posterstring