React Advanced Video Player

A powerful and customizable React video player built with modern features and an intuitive API.

📑 RAVP Documentation

• React Advanced Video Player Documentation

🚀 Features

• 🎥 Supports multiple video formats (MP4, WebM, Ogg, etc.)
• 🎨 Customizable UI (Themes, Controls, and Layouts)
• 🔄 Auto-play, Loop, and Mute options
• 🖥 Full-screen & Picture-in-Picture (PiP) mode
• 🎚 Adjustable playback speed and quality settings
• 🔧 Keyboard shortcuts for quick controls
• 🌐 Cross-browser & mobile-friendly
• 🎭 Subtitle support
• 🔄 Quality selection
• 🔒 Lockable controls

📦 Installation

Install the package via npm or yarn:

npm install react-advanced-video-player

or

yarn add react-advanced-video-player

📌 Usage

Import and use the component in your React application:

import React from "react";
import VideoPlayer from "react-advanced-video-player";
import "react-advanced-video-player/src/components/VideoPlayer/style.css";

const App = () => {
  return (
    <VideoPlayer
      sources={[{ src: "https://www.example.com/sample-video.mp4", quality: "720p" }]}
      subtitles={[{ src: "https://www.example.com/subtitles.vtt", srclang: "en", label: "English" }]}
      poster="https://www.example.com/video-thumbnail.jpg"
      controls
      autoplay={false}
      loop={false}
      pip
      volume={0.8}
      onNext={() => console.log("Next video")}
      onPrevious={() => console.log("Previous video")}
    />
  );
};

export default App;

🛠 Props

Prop	Type	Default	Description
sources	Array	Required	Array of video sources with quality options.
subtitles	Array	[]	Array of subtitle tracks (WebVTT format).
poster	String	""	Poster image shown before video plays.
isDeveloperModeDisabled	Boolean	true	Set to false to enable developer tools in the player.
controls	Boolean	true	Show/hide built-in video controls.
autoplay	Boolean	false	Start video playback automatically.
loop	Boolean	false	Restart video after finishing.
muted	Boolean	false	Start playback in a muted state.
pip	Boolean	false	Enable Picture-in-Picture mode.
volume	Number	1.0	Set default volume level (between 0 and 1).
onNext	Function	null	Callback function for the "Next" video action.
onPrevious	Function	null	Callback function for the "Previous" video action.

🎯 Advanced Configuration

Custom Styles

You can apply custom styles by passing a className prop:

<VideoPlayer className="custom-video-player" />

Event Handlers

Handle player events for better control:

<VideoPlayer
  sources={[{ src: "https://www.example.com/sample-video.mp4", quality: "720p" }]}
  onPlay={() => console.log("Video Started")}
  onPause={() => console.log("Video Paused")}
  onEnded={() => console.log("Video Ended")}
  onNext={() => console.log("Next Video")}
  onPrevious={() => console.log("Previous Video")}
/>

📜 License

This project is licensed under the MIT License.

🔗 Auther Details

📞 Support

For any issues or feature requests, feel free to open an issue or reach out via email.