FrameworkStyle

Media

The component that displays and processes your video or audio

Media is the component that displays and processes your video or audio . Think of it like the <img> element—it’s both the component and what renders the content. Media handles playback while UI components handle controls.

Choosing a Media Type

Pick the media type that matches your source:

Source Type Media Component Description
MP4, WebM, Ogg <Video> Native browser video
HLS (.m3u8) <HlsVideo> Adaptive streaming via hls.js
DASH (.mpd) <DashVideo> Adaptive streaming via dash.js
YouTube <YouTubeVideo> Embedded YouTube videos
Vimeo <VimeoVideo> Embedded Vimeo videos 
// Native video
<Video src="video.mp4" />

// HLS streaming
<HlsVideo src="stream.m3u8" />

// DASH streaming
<DashVideo src="stream.mpd" />

// Service embeds
<YouTubeVideo videoId="dQw4w9WgXcQ" />
<VimeoVideo videoId="123456789" />

Media is Independent

Unlike skins which are tied to players , media is independent. You can use any media type with any player: 

presets.website() + <Video>      ✓
presets.website() + <HlsVideo>   ✓
presets.website() + <YouTubeVideo>   ✓
presets.news() + <Video>         ✓
presets.news() + <HlsVideo>      ✓

The same UI works regardless of what’s playing underneath.

Feature Support

Not every media type supports every feature. The UI can detect and adapt (hiding unavailable controls), but understand what your media choice supports:

Feature Native Video HLS DASH YouTube Vimeo
Playback ✓ ✓ ✓ ✓ ✓
Volume ✓ ✓ ✓ ✓ ✓
Seeking ✓ ✓ ✓ ✓ ✓
Fullscreen ✓ ✓ ✓ ✓ ✓
Quality selection — ✓ ✓ ✓ ✓
Live streaming — ✓ ✓ ✓ —
DVR (live rewind) — ✓ ✓ — —
Chapters ✓ ✓ ✓ ✓ ✓

Example: A native <video> playing an MP4 can’t support a quality selector—there’s only one quality. An HLS stream with multiple renditions can. If your preset includes quality selection but your media doesn’t support it, the quality button simply won’t appear.

Consistent API

All media types expose the same API as the native video element. Whether you’re using native video, HLS, or a service embed, you interact with it the same way: 

import { useRef } from 'react';
import { HlsVideo } from '@videojs/react';

function Player() {
  const mediaRef = useRef<HTMLVideoElement>(null);

  const handlePlay = () => {
    const media = mediaRef.current;
    if (!media) return;

    media.play();
    media.pause();
    media.currentTime = 30;
    media.volume = 0.5;
    console.log(media.duration);
  };

  return (
    <HlsVideo
      ref={mediaRef}
      src="stream.m3u8"
      onCanPlay={handlePlay}
    />
  );
}

This works the same with native video, DASH, or service embeds—the media component normalizes the API so you can swap sources without changing your code.

Some media types add extra capabilities (like qualities for HLS), but the core API stays consistent.

Headless Media

You can use media without any UI for programmatic control: 

import { createPlayer, presets } from '@videojs/react';

const { Provider, usePlayer } = createPlayer(presets.background());

function BackgroundVideo() {
  return (
    <Provider>
      <video src="background.mp4" autoPlay loop muted />
    </Provider>
  );
}

function Controller() {
  const player = usePlayer();
  // Programmatic control, no UI
  player.play();
  player.pause();
}

Browser-Supported Formats

Native video supports formats the browser can play directly:

Video: MP4 (H.264), WebM (VP8/VP9), Ogg (Theora)

Audio: MP3, AAC, Ogg (Vorbis), WAV

Browser support varies. MP4 with H.264 has the widest compatibility.

Streaming Formats

For adaptive streaming (multiple qualities, live video), use HLS or DASH:

HLS (HTTP Live Streaming)

  • Apple’s streaming format
  • .m3u8 playlist files
  • Widely supported, including Safari native playback
  • Good for live and on-demand

DASH (Dynamic Adaptive Streaming over HTTP)

  • Industry standard
  • .mpd manifest files
  • Not natively supported in Safari
  • Good for on-demand, DRM support

Both formats let the player automatically switch quality based on network conditions.

See Also

  • Architecture — How media fits in the three-pillar model
  • Presets — Feature collections (independent of media choice)
  • Skins — UI packages (work with any media)
VideoJS