Skip to content

ReferenceMedia

Audio

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

Import

Import Audio from the audio preset:

import { Audio } from '@videojs/react/audio';

Anatomy

<Audio>
  <source />
</Audio>

Use with a player

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

Native behavior

Video.js does not replace the native audio 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, Mux, Spotify, or other playback adapter.

Audio forwards native attributes, event handlers, and children to the underlying <audio>. Its ref resolves to the HTMLAudioElement.

See MDN for the complete <audio> element, HTMLAudioElement, and shared HTMLMediaElement APIs.

Examples

Basic Usage

This native audio element uses a child source and browser controls while providing media to the surrounding Video.js player.

import { Container } from '@videojs/react';
import { Audio, AudioPlayer } from '@videojs/react/audio';

import './BasicUsage.css';

export default function BasicUsage() {
  return (
    <AudioPlayer>
      <Container className="react-audio-basic">
        <Audio className="react-audio-basic__media" controls preload="metadata">
          <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" />
        </Audio>
      </Container>
    </AudioPlayer>
  );
}