HextaUI

Video player: Minimal

Use only the parts you need. tooltips={false} turns off the hover hints, and type="remaining" counts down instead of up.

--:--
import {
  VideoPlayer,
  VideoPlayerContent,
  VideoPlayerControls,
  VideoPlayerFullscreenButton,
  VideoPlayerPlayButton,
  VideoPlayerSeekBar,
  VideoPlayerSpacer,
  VideoPlayerTime,
} from "@/components/ui/video-player"

export function VideoPlayerMinimal() {
  return (
    <VideoPlayer className="max-w-md">
      <VideoPlayerContent
        src="https://media.w3.org/2010/05/sintel/trailer.mp4"
        poster="https://media.w3.org/2010/05/sintel/poster.png"
        aria-label="Sintel trailer"
      />
      <VideoPlayerControls tooltips={false}>
        <VideoPlayerSeekBar />
        <VideoPlayerPlayButton />
        <VideoPlayerTime type="remaining" />
        <VideoPlayerSpacer />
        <VideoPlayerFullscreenButton />
      </VideoPlayerControls>
    </VideoPlayer>
  )
}

This adds the example as components/examples/video-player/minimal.tsx, together with the Video player component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/video-player-minimal.json

To add only the component, follow the Video player installation.

Props in this example

The Video player props this example sets, from the API reference.

PropTypeDefault
tooltipsShow each control’s label and shortcut on hover.
booleantrue
PropTypeDefault
type
"both" | "elapsed" | "remaining" | "duration""both"

Every prop is in the Video player API reference.

See them all, with keyboard support and accessibility notes, on the Video player page.