Skip to content

ReferenceMedia

Video

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

Import

Import Video from the video preset:

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

Anatomy

<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 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 forwards native attributes, event handlers, and children to the underlying <video>. Its ref resolves to the HTMLVideoElement.

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