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:

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

Anatomy

<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 when the browser should choose between candidates. See Media sources when you need an HLS, DASH, Mux, or other playback adapter.

Add native <track> elements 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, HTMLVideoElement, and shared 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.

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>
  );
}

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

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

<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>

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

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

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