react-video-audio-player

v1.3.7

Published

3 months ago

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.

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/[email protected]/dist/index.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/index.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/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>

📖 Full Documentation

For detailed guides, API reference, and demos, visit:
➡️ react-video-audio-player.vercel.app

License

This project is licensed under the MIT License.

Contributing

We welcome contributions! Please see the CONTRIBUTING.md file for guidelines on how to contribute to this project.

Acknowledgements

This project uses the following libraries:

WaveSurfer for the audio visualisation
Lucide React for the svg icons
Remix Icon for the svg icons
Tailwind CSS for the styling

Code of Conduct

By participating in this project, you agree to abide by the Code of Conduct. Please be respectful and considerate of others in the community.

References

Author

Walid Adebayo