# Video Player

> Custom controls over a native video: poster with a big play button, auto-hiding control bar, chaptered scrubber with buffered range and hover-time tooltip, skip, volume, speed menu, captions from inline WebVTT, picture-in-picture, fullscreen and YouTube-style keyboard shortcuts.

- Slug: `video-player`
- Category: [Media](https://www.assembli.design/category/media.md)
- Type: component
- Tags: video, player, chapters, captions, scrubber, fullscreen, keyboard
- npm dependencies: @base-ui/react, lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/video-player
- Page: https://www.assembli.design/components/video-player

![Video Player preview](https://www.assembli.design/thumbnails/video-player-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | `string \| VideoSource[]` |  | One URL, or several sources in order of preference (e.g. WebM then MP4). |
| `poster` | `string` |  | Always set one: it is what people see before playing, and what thumbnails capture. |
| `title` | `string` |  |  |
| `duration` | `number` | `0` | Length in seconds, shown on the poster before the video's metadata has loaded. |
| `chapters` | `VideoChapter[]` |  | Chapter starts in seconds. They split the scrubber into segments and name the hovered time. |
| `captions` | `string` |  | A WebVTT document (loaded through a Blob URL) or the URL of a .vtt file. |
| `captionsLabel` | `string` | `"English"` |  |
| `captionsLang` | `string` | `"en"` |  |
| `defaultCaptions` | `boolean` | `false` |  |
| `rates` | `number[]` | `RATES` | Choices in the speed menu. |
| `autoHideMs` | `number` | `2500` | How long the controls stay up after the pointer stops while playing, in ms. |
| `skip` | `number` | `10` | Seconds that J/L and the skip buttons jump. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/video-player/video-player.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/video-player
```

Registry item JSON: https://www.assembli.design/r/video-player.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.