# 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](https://react-advanced-video-player-documentaion.vercel.app/)

## 🚀 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:

```bash
npm install react-advanced-video-player
```
or
```bash
yarn add react-advanced-video-player
```

## 📌 Usage

Import and use the component in your React application:

```jsx
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:

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

### Event Handlers

Handle player events for better control:

```jsx
<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](LICENSE).

## 🔗 Auther Details
[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://tirth-gaudani.github.io/portfolio/) 
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://in.linkedin.com/in/tirthgaudani)

## 📞 Support

For any issues or feature requests, feel free to open an issue or reach out via [email](mailto:gaudani.tirth8231@gmail.com).