React Video Audio Player 🎬🎵

!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.

- Getting Started
- Features
- Video Player
- Audio Player
- Installation
- NPM
- CDN
- 🚀 Quick Start
- React and Next.js Usage
- CDN Usage
- 📖 Full Documentation
- License
- Contributing
- Acknowledgements
- Code of Conduct
- References
- Author

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

$3

- 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.

$3

- 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

$3

To install the package, use npm:

``bash
npm install react-video-audio-player
`

$3

You can also include the package directly via CDN:

`html


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

🚀 Quick Start

$3

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

;
;
`

$3

JSFiddle Demo

`html



``

📖 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

- React Video Audio Player Demo
- JSFiddle Demo
- React Video and Audio Player Documentation
- React Video and Audio Player Git
- React Video and Audio Player License

Author

- Walid Adebayo