React Advanced Video Player

A customizable React video player supporting both regular videos and YouTube embeds.

Features

• Support for regular video files and YouTube videos
• Customizable play button
• Fullscreen support
• Keyboard shortcuts
• Automatic controls hiding
• Progress bar with seeking
• Time display
• Mute/unmute functionality

Installation

npm install react-advanced-video-player
# or
yarn add react-advanced-video-player

Usage

import React, { useState } from 'react';
import { VideoPlayer } from 'react-advanced-video-player';

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Video
      </button>

      <VideoPlayer
        videoSrc="https://example.com/video.mp4"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="My Awesome Video"
      />
    </div>
  );
};

YouTube Support

<VideoPlayer
  videoSrc="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  isYouTube={true}
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="YouTube Video"
/>

Custom Play Button

<VideoPlayer
  videoSrc="https://example.com/video.mp4"
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  customPlayButton={
    <div className="my-custom-button">
      <span>PLAY</span>
    </div>
  }
/>

Props

| Prop | Type | Description | |------|------|-------------| | videoSrc | string | URL of the video or YouTube link | | isOpen | boolean | Whether the video modal is open | | onClose | function | Function to call when the modal is closed | | isYouTube | boolean | Whether the video is a YouTube video | | youtubeOptions | object | Options for the YouTube player | | customPlayButton | ReactNode | Custom play button component | | title | string | Title displayed in the header |

Keyboard Shortcuts

• Space / K: Play/Pause
• M: Mute/Unmute
• F: Toggle Fullscreen
• ESC: Close video (when not in fullscreen)

License

MIT