Fast setup for the full video and audio package

Install in one command, then ship a better media experience.

React Video Audio Player works with modern React apps, CDN embeds, and custom player layouts. Pick the install path you need and move straight into the player features that matter.

Read the docsOpen the demo
Video and audio components
CDN and npm support
Playlist, preview, and waveform features

Quick start

The fastest route is usually npm, pnpm, or yarn. CDN is there for demos and legacy integration.

1

Install the package

2

Import VideoPlayer or AudioPlayer

3

Pass your source and configure controls

4

Enable previews, tracks, or waveform audio as needed

NPM

Best for most React projects.

npm install react-video-audio-player

Yarn

Use if your app already standardizes on Yarn.

yarn add react-video-audio-player

pnpm

Great for fast installs and strict dependency graphs.

pnpm add react-video-audio-player

CDN

Useful for quick prototypes and script-tag integration.

<!-- UMD -->
<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.7/dist/index.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.7/dist/video-audio-player.min.css" />

Requirements

  • React 16.8 or higher
  • Modern browser with HTML5 video/audio support
  • Internet connection for streaming media

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Opera (latest)

Basic usage

Start with the component that fits your media type, then add the optional props your product needs.

Video Player

1import { VideoPlayer } from 'react-video-audio-player';
2
3function App() {
4  return (
5    <VideoPlayer
6      src="video.mp4"
7      controls
8      autoPlay={false}
9      loop={false}
10      muted={false}
11      width="100%"
12      height="auto"
13      accentColor="#60a5fa"
14      maxAutoPlayDuration={60}
15      preview={{ mode: 'clip', start: 15, duration: 12, loop: false }}
16    />
17  );
18}

UMD Version

1<div id="video-player-container"></div>
2
3<!-- UMD -->
4<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.7/dist/index.umd.min.js"></script>
5<link
6  rel="stylesheet"
7  href="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.7/dist/video-audio-player.min.css"
8/>
9
10<script>
11  const videoPlayerContainer = document.getElementById('video-player-container');
12  const videoPlayer = VideoPlayer({
13    src: 'video.mp4',
14    controls: true,
15    autoPlay: false,
16    muted: false,
17    loop: false,
18    poster: 'poster.jpg',
19    onReady: () => {
20      console.log('Video is ready to play');
21    },
22  });
23  videoPlayerContainer.appendChild(videoPlayer);
24</script>

Audio Player

1import { AudioPlayer } from 'react-video-audio-player';
2
3function App() {
4  return (
5    <AudioPlayer
6      src="audio.mp3"
7      controls
8      autoPlay={false}
9      loop={false}
10      muted={false}
11      width="100%"
12      accentColor="#60a5fa"
13    />
14  );
15}

UMD Version

1<div id="audio-player-container"></div>
2<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.7/dist/index.umd.min.js"></script>
3<link
4  rel="stylesheet"
5  href="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.7/dist/video-audio-player.min.css"
6/>
7
8<script>
9  const audioPlayerContainer = document.getElementById('audio-player-container');
10  const audioPlayer = AudioPlayer({
11    src: 'audio.mp3',
12    controls: true,
13    autoPlay: false,
14    muted: false,
15    loop: false,
16    onReady: () => {
17      console.log('Audio is ready to play');
18    },
19  });
20  audioPlayerContainer.appendChild(audioPlayer);
21</script>

Next step

Move from install to implementation.

Open the docs for prop details, or jump straight into the demo to test the controls before wiring it into your app.

View docsOpen demo