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:

<span class="na">src="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/index.umd.min.js">

  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 

<span class="na">src="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/index.umd.min.js">

  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/video-audio-player.min.css"
/>


     id="video-player-container">
     id="audio-player-container">

    
      // 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);

🌐 Useful Links

🙌 Contribution

I’d love feedback, contributions, or suggestions!

If this component helps your project, a star on GitHub would mean a lot.

Thanks for reading - happy coding!

#ReactJS #WebDev #OpenSource #JavaScript #Frontend #MediaPlayer #AudioPlayer #VideoPlayer #nextjs #react #html