# Reference

> Every prop, part and keyboard shortcut.

## API

Each player takes every native prop of the element it wraps, except controls. These are the extra props.

### VideoPlayer

| Prop | Type | Description |
| --- | --- | --- |
| `className` | `string` | Classes for the <video> element itself. |
| `frameClassName` | `string` | Classes for the outer frame. Use this for size, radius and placement. |
| `tracks` | `VideoTrack[]` | WebVTT caption or subtitle files: { src, label, srcLang, kind?, default? }. |
| `loader` | `MediaSourceLoader` | Adapter for sources the browser cannot play natively, such as HLS. |
| `metadata` | `MediaInfo` | Title, artist, album and artwork for lock screens and OS media controls. |
| `persistKey` | `string` | Remember volume, mute and speed in localStorage under this key. |
| `tooltips` | `boolean` | Small labels with their shortcut over the controls on hover and focus. On by default. |

### AudioPlayer

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `ReactNode` | The main line beside the controls. |
| `description` | `ReactNode` | The muted line after the title. |
| `artwork` | `string` | Cover image beside the controls and in OS media controls. |
| `showSpeed` | `boolean` | Show a playback speed toggle, for podcasts and voice notes. |
| `tooltips` | `boolean` | Same as on VideoPlayer. On by default. |
| `frameClassName` | `string` | Classes for the outer frame. className targets the <audio> element. |
| `loader` | `MediaSourceLoader` | Same as on VideoPlayer. |
| `metadata` | `MediaInfo` | Overrides the metadata built from title, description and artwork. |
| `persistKey` | `string` | Same as on VideoPlayer. |

## Parts

Everything is exported from `components/ui/media.tsx`.

- `MediaRoot`: Owns the store. Exposes data-paused, data-started, data-waiting, data-idle, data-fullscreen.
- `MediaVideo / MediaAudio`: The native element. Every native prop passes through.
- `MediaSurface`: Full-bleed click target. First tap on touch reveals controls.
- `MediaControls`: Reveals on pointer activity, pause, or keyboard focus.
- `MediaSeek / MediaVolume`: Accessible sliders with scrubbing, buffering and keyboard steps. MediaVolume takes orientation="vertical" for a popover.
- `MediaTime`: current, duration or remaining. toggle lets a click switch to remaining time and back.
- `MediaButton`: The base button the others are built from. Use it for your own controls.
- `Media*Button`: MediaPlayButton, MediaMuteButton, MediaCaptionsButton, MediaFullscreenButton, MediaPictureInPictureButton, MediaPlaybackRateButton.
- `MediaSettings`: Speed and caption track menu.
- `MediaCaptions`: Renders the active cue with your styles instead of the browser's.
- `MediaLoading / MediaErrorMessage`: Buffering indicator and a retryable error state.
- `useMedia(selector)`: Subscribe to any slice of state. Re-renders only when it changes.
- `useMediaStore()`: Imperative access: play, seek, setVolume, setTextTrack and more.

## Keyboard

Shortcuts apply to the focused player only, so several can live on one page.

| Keys | Action |
| --- | --- |
| Space, K | Play or pause |
| J, L | Seek 10 seconds |
| Left arrow, Right arrow | Seek 5 seconds |
| Up arrow, Down arrow | Volume |
| 0, 9 | Jump to 0–90% |
| Home, End | Start or end |
| M | Mute |
| C | Captions |
| I | Picture-in-picture |
| F | Fullscreen |

## More docs

- [Getting started](https://bobine.fyi/docs.md): Install bobine and swap your first video or audio element.
- [Guides](https://bobine.fyi/docs/guides.md): Compose your own player, play adaptive streams, write a loader and theme the controls.