React-advanced-video-player NPM

React Advanced Video Player

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

🚀 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

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.
`poster`	String	`""`	Poster image shown before video plays.
`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 (0 to 1).
`onNext`	Function	`null`	Callback for next video action.
`onPrevious`	Function	`null`	Callback for 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")}
/>