# Video Player

> Plays video in the page with full controls: play, progress, skip 30 seconds, volume, settings and full screen. The small size is a titled thumbnail that opens the player.

Source: https://ritla.app/ui/video-player

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add video-player
```

With the shadcn CLI instead:

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

Dependencies: `@base-ui/react`, `@phosphor-icons/react`

## Usage

```tsx
import { VideoPlayer } from "@/components/ui/video-player";

<VideoPlayer
  src="/videos/wallet.webm"
  poster="/videos/wallet.webp"
  title="Set up your wallet"
  captions={[{ src: "/videos/wallet.ar.vtt", srcLang: "ar", label: "العربية", default: true }]}
/>
```

## Examples

### Titled thumbnails

The small size (`size="sm"`) is a button that opens the video, with a title and a line above it for the part and length. In Arabic the text starts on the right; the play icon doesn't turn.

Live preview: https://ritla.app/_kanz/preview/ltr/video-player-thumbnails

## API reference

### `VideoPlayer`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src / poster` | `string` | None | The video, and the poster before playback; pick one that shows what it is about. |
| `title` | `string` | None | What the video is: the player's name, printed on the small size. |
| `size` | `"lg" \| "sm"` | `"lg"` | Figma's Size: lg plays in place; sm is a thumbnail that opens it. |
| `overline` | `ReactNode` | None | A short line above the title on the small size (part and length). |
| `captions` | `{ src, srcLang, label, default? }[]` | None | Caption tracks (WebVTT); offer Arabic captions on Arabic pages. |
| `onNext` | `() => void` | None | The Next button; hidden without it. |
| `onOpen` | `() => void` | None | On the small size: opens the video (in a Dialog or a page). |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Space`: Plays or pauses when the player has focus.
- `ArrowLeft` + `ArrowRight`: Back or forward 5 seconds, the same way in Arabic; on the seek bar, one second.
- `M`: Mutes or unmutes.
- `F`: Enters or leaves full screen.

ARIA:

- Every control is a named button (Play, Pause, Back 30 seconds); the name follows the state.
- The seek bar is a slider that reads the time as text: “0:23 of 4:39”.
- Controls show while paused and on hover, focus or tap, and never hide while paused.
- No autoplay; captions are a choice in settings, not burned into the picture.

## Arabic and RTL notes

Mirrors:

- The small size's title and overline, the captions, the settings menu and the layout around the player.

Does not mirror:

- The control bar, as in English: play first, the seek bar filling left to right, full screen last.
- Back 30 seconds on the left, forward on the right, and the play arrow pointing right.
- Times read left to right, and the arrow keys seek the same way.

Numerals: Times in Western digits unless the product uses Arabic-Indic.

Arabic typography: Times `body-12` Semibold in white; the small size's title `body-16` Semibold over a `body-12` line.

Mixed-direction text: The control bar is an LTR island inside the Arabic page.