React-video-audio-player NPM

npm version license build status downloads size

Getting Started

React Video Audio Player is a lightweight, customisable React video player and React audio player that supports video, audio, and streaming playback. Perfect for building modern media applications.

Features

✅ Full support for video and audio
✅ Custom controls and styling
✅ Audio Player uses WaveSurfer for audio visualisation
✅ Audio Player works with MP3, WAV, M4A, MP4, AAC, WMA, FLAC, OGG, OPUS, and WEBM
✅ Video Player works with MP4, WEBM, OGV/OGG, and MKV
✅ Responsive and easy to integrate in React apps
✅ Keyboard shortcuts for easy navigation

Video Player

Play/Pause: Toggle video playback.
Mute/Unmute: Toggle video sound.
Fullscreen: Toggle fullscreen mode.
Picture-in-Picture: Toggle picture-in-picture mode (not supported on iOS).
Volume Control: Adjust the volume.
Playback Speed: Change the playback speed (0.25x, 0.5x, 0.75x, 1x, 1.25x, 1.5x, 1.75x, 2x).
Seek Control: Seek to different parts of the video.
Keyboard Shortcuts: Built-in keyboard shortcuts for better accessibility and user experience.
Poster Auto Generation: Automatically generate a poster image from the video.

Audio Player

Play/Pause: Toggle audio playback.
Mute/Unmute: Toggle audio sound.
Volume Control: Adjust the volume.
Playback Speed: Change the playback speed (0.25x, 0.5x, 0.75x, 1x, 1.25x, 1.5x, 1.75x, 2x).
Seek Control: Seek to different parts of the audio.
Keyboard Shortcuts: Built-in keyboard shortcuts for better accessibility and user experience.

Installation

NPM

To install the package, use npm:

npm install react-video-audio-player

CDN

You can also include the package directly via CDN:

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

🚀 Quick Start

React and Next.js Usage

import { VideoPlayer, AudioPlayer } from "react-video-audio-player";

<VideoPlayer src="video.mp4" controls autoPlay />;
<AudioPlayer src="audio.mp3" controls />;

CDN Usage

JSFiddle Demo

<div id="video-player-container"></div>
<div id="audio-player-container"></div>

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

<script>
  // Initialise the VideoPlayer
  const videoPlayerContainer = document.getElementById(
    "video-player-container"
  );
  const videoPlayer = VideoPlayer({
    src: "video.mp4",
    controls: true,
    autoPlay: false,
    muted: false,
    loop: false,
    poster: "poster.jpg",
    onReady: () => {
      console.log("Video is ready to play");
    },
  });
  videoPlayerContainer.appendChild(videoPlayer);

  // Initialise the AudioPlayer
  const audioPlayerContainer = document.getElementById(
    "audio-player-container"
  );
  const audioPlayer = AudioPlayer({
    src: "audio.mp3",
    controls: true,
    autoPlay: false,
    muted: false,
    loop: false,
    onReady: () => {
      console.log("Audio is ready to play");
    },
  });
  audioPlayerContainer.appendChild(audioPlayer);
</script>