# Video

Native video playback that can provide media to a Video.js player

## Import

Import `Video` from the video preset:

```tsx
import { Video } from '@videojs/react/video';
```

## Anatomy

```tsx
<Video>
  <source />
  <track />
</Video>
```

## Use with a player

Place `Video` anywhere inside a `VideoPlayer`, or inside another Video.js `Player` configured for video. It becomes that player’s media provider automatically. Outside a player, `Video` behaves as a standalone native `<video>`.

## Native behavior

Video.js does not replace the native video API. Use `src` for one URL or add child [`<source>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) when the browser should choose between candidates. See [Media sources](https://videojs.org/docs/framework/react/guides/media-sources) when you need an HLS, DASH, Mux, or other playback adapter.

Add native [`<track>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track) for captions, subtitles, chapters, descriptions, or metadata.

`Video` forwards native attributes, event handlers, and children to the underlying `<video>`. Its `ref` resolves to the `HTMLVideoElement`.

See MDN for the complete [`<video>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video), [`HTMLVideoElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement), and shared [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) APIs.

## Examples

### Basic Usage

This native video uses a child source, captions track, and browser controls while also providing media to the surrounding Video.js player.

**App.tsx**

```tsx
import { Container } from '@videojs/react';
import { Video, VideoPlayer } from '@videojs/react/video';

import './BasicUsage.css';

export default function BasicUsage() {
  return (
    <VideoPlayer>
      <Container className="react-video-basic">
        <Video className="react-video-basic__media" controls playsInline preload="metadata">
          <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" type="video/mp4" />
          <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
        </Video>
      </Container>
    </VideoPlayer>
  );
}
```

**App.css**

```css
.react-video-basic {
  width: 100%;
  overflow: hidden;
  background: black;
  border-radius: 8px;
}

.react-video-basic__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt