# Video player: Custom controls

> `useVideoPlayer` reads state and actions from any component inside the player. Select only what you use, so the component re-renders only when that value changes.

Example: https://hextaui.com/docs/video-player/examples/custom-controls
Component docs: https://hextaui.com/docs/video-player.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/video-player-custom-controls.json
```

This adds `components/examples/video-player/custom-controls.tsx` with the Video player component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/video-player/custom-controls.tsx"
"use client"

import { Button } from "@/components/ui/button"
import {
  formatTime,
  useVideoPlayer,
  VideoPlayer,
  VideoPlayerContent,
  VideoPlayerControls,
  VideoPlayerPlayButton,
  VideoPlayerSeekBar,
  VideoPlayerTime,
} from "@/components/ui/video-player"

const chapters = [
  { title: "The cave", time: 0 },
  { title: "Searching", time: 13 },
  { title: "The dragon", time: 31 },
]

function Chapters() {
  const seek = useVideoPlayer((player) => player.seek)
  const play = useVideoPlayer((player) => player.play)
  const currentTime = useVideoPlayer((player) => Math.floor(player.currentTime))
  const active = chapters.findLast((chapter) => chapter.time <= currentTime)

  return (
    <div className="flex flex-wrap gap-2">
      {chapters.map((chapter) => (
        <Button
          key={chapter.title}
          variant={chapter === active ? "secondary" : "outline"}
          size="sm"
          aria-pressed={chapter === active}
          onClick={() => {
            seek(chapter.time)
            play()
          }}
        >
          <span className="tabular-nums">{formatTime(chapter.time)}</span>
          {chapter.title}
        </Button>
      ))}
    </div>
  )
}

export function VideoPlayerCustomControls() {
  return (
    <VideoPlayer variant="bar" className="max-w-xl">
      <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>
        <VideoPlayerSeekBar />
        <VideoPlayerPlayButton />
        <VideoPlayerTime />
        <div className="basis-full px-1 pt-1">
          <Chapters />
        </div>
      </VideoPlayerControls>
    </VideoPlayer>
  )
}
```

## Props in this example

### VideoPlayer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"overlay" \| "bar"` | `"overlay"` | overlay floats auto-hiding controls over the video. bar puts them below it. |

## More Video player examples

- [Bar](https://hextaui.com/docs/video-player/examples/bar.md)
- [Minimal](https://hextaui.com/docs/video-player/examples/minimal.md)
- [Seek offsets and speeds](https://hextaui.com/docs/video-player/examples/seek-offsets.md)
- [Page-wide shortcuts](https://hextaui.com/docs/video-player/examples/global-shortcuts.md)
- [Captions](https://hextaui.com/docs/video-player/examples/captions.md)
- [Error](https://hextaui.com/docs/video-player/examples/error.md)
- [Right to left](https://hextaui.com/docs/video-player/examples/rtl.md)