# video

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

## Import

The media element is the browser’s native `<video>`. Import the video player registration when it should provide media to Video.js:

```ts
import '@videojs/html/video/player';
```

## Anatomy

```html
<video>
  <source />
  <track />
</video>
```

## Use with a player

Place a native `<video>` anywhere inside `<video-player>`. It becomes that player’s media provider automatically.

## 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](../../guides/media-sources.md) 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>` is the native element itself. Set its attributes and properties, listen for native media events, and access it through an `HTMLVideoElement` reference.

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.

**index.html**

```html
<video-player>
  <media-container class="html-video-basic">
    <video class="html-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>
  </media-container>
</video-player>
```

**index.css**

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

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

**index.ts**

```ts
import '@videojs/html/video/player';
import '@videojs/html/ui/container';
```