# Video preset
The general-purpose video preset — a player, feature bundle, skins, and media for on-demand video
`@videojs/react/video` is the general-purpose preset for on-demand video. It bundles `VideoPlayer`, the `videoFeatures` bundle it is configured with, two skins, and the `Video` media component. See [Presets](https://videojs.org/docs/framework/react/guides/presets) for how presets fit together and how to customize one.
## Import
```tsx
import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';
import '@videojs/react/video/skin.css';
```
Each skin has its own stylesheet. Import `@videojs/react/video/neutral-skin.css` instead when you use `NeutralVideoSkin`.
## Usage
**App.tsx**
```tsx
import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';
import '@videojs/react/video/skin.css';
export function App() {
return (
);
}
```
## Player
`VideoPlayer` is a [`Player`](https://videojs.org/docs/framework/react/reference/components/player) created by [`createPlayer`](https://videojs.org/docs/framework/react/reference/api/create-player) with `videoFeatures`. It provides the player store to its descendants and renders no DOM element of its own.
`VideoPlayerProps` types its props:
| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` | Content placed inside the player context: a skin, the media, and your own components. |
| `title` | `string \| null` | The title to display. Takes precedence over the title the media reports; `null` clears your value, so the title falls back to the one the media reports. |
| `poster` | `string \| null` | The poster to display. Takes precedence over the poster the media reports; `null` clears your value, so the poster falls back to the one the media reports. |
`title` and `poster` come from the [metadata feature](https://videojs.org/docs/framework/react/reference/api/feature-metadata#player-inputs).
The preset also exports a `usePlayer` hook typed to `videoFeatures`. Use it from any component inside `VideoPlayer`; see [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player).
## Feature bundle
`videoFeatures` is the array of [features](https://videojs.org/docs/framework/react/guides/features) the player is configured with:
| Feature | Description |
| --- | --- |
| [`playbackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-playback) | Play/pause state and actions for the player store |
| [`playbackRateFeature`](https://videojs.org/docs/framework/react/reference/api/feature-playback-rate) | Playback speed state and actions for the player store |
| [`qualityFeature`](https://videojs.org/docs/framework/react/reference/api/feature-quality) | Video rendition state and actions for the player store |
| [`audioTrackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-audio-track) | Audio track state and actions for the player store |
| [`volumeFeature`](https://videojs.org/docs/framework/react/reference/api/feature-volume) | Volume level and mute state for the player store |
| [`timeFeature`](https://videojs.org/docs/framework/react/reference/api/feature-time) | Playback position and duration state for the player store |
| [`sourceFeature`](https://videojs.org/docs/framework/react/reference/api/feature-source) | Media source state and actions for the player store |
| [`bufferFeature`](https://videojs.org/docs/framework/react/reference/api/feature-buffer) | Buffered and seekable time range state for the player store |
| [`fullscreenFeature`](https://videojs.org/docs/framework/react/reference/api/feature-fullscreen) | Fullscreen state and actions for the player store |
| [`pipFeature`](https://videojs.org/docs/framework/react/reference/api/feature-pip) | Picture-in-picture state and actions for the player store |
| [`remotePlaybackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-remote-playback) | Remote playback state and actions for the player store |
| [`controlsFeature`](https://videojs.org/docs/framework/react/reference/api/feature-controls) | User activity and controls visibility state for the player store |
| [`textTrackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-text-tracks) | Subtitles, captions, and chapter track state for the player store |
| [`errorFeature`](https://videojs.org/docs/framework/react/reference/api/feature-error) | Media error state and actions for the player store |
| [`metadataFeature`](https://videojs.org/docs/framework/react/reference/api/feature-metadata) | Resolved title and poster values for the player store |
Its type, `VideoFeatures`, is the tuple of those features in order. Import it from the package root:
```tsx
import type { VideoFeatures } from '@videojs/react';
```
To add or remove a feature, pass your own array to `createPlayer`. The skins expect the features they render controls for.
```tsx
import { createPlayer, orientationLockFeature } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';
const { Player, usePlayer } = createPlayer({
features: [...videoFeatures, orientationLockFeature],
});
```
## Skins
- [VideoSkin](https://videojs.org/docs/framework/react/reference/components/video-skin) — the default skin, with the modern, frosted look.
- [NeutralVideoSkin](https://videojs.org/docs/framework/react/reference/components/video-neutral-skin) — the visually lighter variant, closer to a classic control bar.
## Media
The preset exports [`Video`](https://videojs.org/docs/framework/react/reference/components/video), which renders a native `