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
CODE
npm install react-video-audio-player
or use CDN:
CODE
<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)
CODE
import { VideoPlayer, AudioPlayer } from 'react-video-audio-player';
function App() {
return (
<VideoPlayer
src="video.mp4"
/>
<AudioPlayer
src="audio.mp3"
/>
);
}
🧩 Or in plain HTML
CODE
<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>
🌐 Useful Links
- 🔗 Live Demo:
- ⭐ GitHub Repo:
🙌 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
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR