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.