# Live video preset
The live video preset — a player, feature bundle, skins, and media for live video streams
`@videojs/react/live-video` is the preset for live video streams. It bundles `LiveVideoPlayer`, the `liveVideoFeatures` bundle it is configured with, two skins that swap the time slider and time displays for a Live button, and the `Video` media component. See [Presets](https://videojs.org/docs/framework/react/guides/presets) for how presets fit together and [Live streams](https://videojs.org/docs/framework/react/guides/live-streams) for playing a live source.
## Import
```tsx
import { LiveVideoPlayer, LiveVideoSkin, Video } from '@videojs/react/live-video';
import '@videojs/react/live-video/skin.css';
```
Each skin has its own stylesheet. Import `@videojs/react/live-video/neutral-skin.css` instead when you use `NeutralLiveVideoSkin`.
## Usage
Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native video.
**App.tsx**
```tsx
import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
import { LiveVideoPlayer, LiveVideoSkin } from '@videojs/react/live-video';
import '@videojs/react/live-video/skin.css';
export function App() {
return (
);
}
```
## Player
`LiveVideoPlayer` 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 `liveVideoFeatures`. It provides the player store to its descendants and renders no DOM element of its own.
`LiveVideoPlayerProps` 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 `liveVideoFeatures`. Use it from any component inside `LiveVideoPlayer`; see [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player).
## Feature bundle
`liveVideoFeatures` is the array of [features](https://videojs.org/docs/framework/react/guides/features) the player is configured with. It is the [video preset’s](https://videojs.org/docs/framework/react/reference/api/preset-video#feature-bundle) `videoFeatures` without playback rate, quality, and audio-track selection, plus the [live feature](https://videojs.org/docs/framework/react/reference/api/feature-live):
| Feature | Description |
| --- | --- |
| [`playbackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-playback) | Play/pause 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 |
| [`liveFeature`](https://videojs.org/docs/framework/react/reference/api/feature-live) | Live edge state 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, `LiveVideoFeatures`, is the tuple of those features in order. Import it from the package root:
```tsx
import type { LiveVideoFeatures } 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, streamTypeFeature } from '@videojs/react';
import { liveVideoFeatures } from '@videojs/react/live-video';
const { Player, usePlayer } = createPlayer({
features: [...liveVideoFeatures, streamTypeFeature],
});
```
## Skins
- [LiveVideoSkin](https://videojs.org/docs/framework/react/reference/components/live-video-skin) — the default skin, which swaps the time controls for a Live button.
- [NeutralLiveVideoSkin](https://videojs.org/docs/framework/react/reference/components/live-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), the same component as the video preset, which renders a native `