🚀 Introducing React Video & Audio Player: A Customisable Media Component for Modern Web Apps

If you're building a video platform, podcast app, or just need flexible media components - meet your new favourite tool:

React Video & Audio Player

A lightweight, open-source video & audio player component built with React and styled with TailwindCSS.

It also works in plain HTML via CDN, with full control over styles and functionality.

✅ Features

Supports multiple media formats: MP4, MP3, OGG, WEBM, WAV, and more
Customisable controls: Play, pause, skip, download, fullscreen, and volume
Keyboard shortcuts: For accessible and intuitive playback
Visual waveform rendering: For audio files
Responsive and theme-aware: Styled with TailwindCSS
Plug-and-play: Works in React, Next.js, or standalone HTML/JS projects

📦 Installation

npm install react-video-audio-player

or use CDN:

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

⚡ Quick Usage (React Example)

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

function App() {

  return (
    <VideoPlayer
      src="video.mp4"
    />
     <AudioPlayer
       src="audio.mp3"
    />
  );

}

🧩 Or in plain HTML

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

    <script>
      // Initialise the VideoPlayer
      const videoPlayerContainer = document.getElementById('video-player-container');
      const videoPlayer = VideoPlayer({
        src: 'video.mp4',
      });
      videoPlayerContainer.appendChild(videoPlayer);

      // Initialise the AudioPlayer
      const audioPlayerContainer = document.getElementById('audio-player-container');
      const audioPlayer = AudioPlayer({
        src: 'audio.mp3',
      });
      audioPlayerContainer.appendChild(audioPlayer);
    </script>
</body>