reactvidplay

Here’s a polished README.md tailored for your react-videoplayer package. I’ve written it the way an experienced open-source maintainer would structure it—clear, professional, and developer-friendly:

React Video Player

A customizable React video player component with modern UI, keyboard shortcuts, and advanced controls. Built for developers who want a lightweight yet feature-rich alternative to default HTML video controls.

🚀 Installation

npm install react-videoplayer lucide-react

or with yarn:

yarn add react-videoplayer lucide-react

⚡ Usage

import React from "react";
import { ReactVidPlayer } from "react-videoplayer";
import "react-videoplayer/dist/ReactVidPlayer.css";

function App() {
  return (
    <div>
      <ReactVidPlayer
        src="https://example.com/video.mp4"
        width="800px"
        height="450px"
        controls
        color="#ff0000"
        onPlay={() => console.log("Video started")}
        onPause={() => console.log("Video paused")}
      />
    </div>
  );
}

export default App;

✨ Features

• 🎛️ Custom video controls with a clean, modern UI
• ⌨️ Keyboard shortcuts for quick navigation
• 🔊 Volume control & mute toggle with slider
• 🎥 Picture-in-Picture support
• 🖥️ Fullscreen mode with smooth transition
• 🎨 Customizable theme color via props
• 📱 Mobile responsive & touch-friendly
• 🖱️ Optional context menu (disable right-click download menu)
• 🕹️ Auto-hide controls when inactive

⌨️ Keyboard Shortcuts

Key	Action
Space	Play / Pause
←	Skip backward 10s
→	Skip forward 10s
↑	Volume up
↓	Volume down

⚙️ Props

Prop	Type	Default	Description
src	string	required	Video source URL
controls	boolean	true	Show custom controls
autoplay	boolean	false	Auto play video
muted	boolean	false	Mute video initially
loop	boolean	false	Loop video
contextMenu	boolean	false	Enable right-click context menu
poster	string	-	Poster image URL
width	string | number	'100%'	Video width
height	string | number	'auto'	Video height
className	string	''	Additional CSS classes
color	string	'#ff0000'	Theme color for controls
onPlay	() => void	-	Callback when video starts
onPause	() => void	-	Callback when video pauses
onTimeUpdate	(time: number) => void	-	Called on playback time update
onEnded	() => void	-	Callback when video ends

🛠️ Roadmap

• Add support for subtitles/captions
• Quality switcher for multiple sources
• HLS/DASH streaming support
• Customizable keyboard shortcuts

📜 License

MIT © 2025 – Maintained by Your Name

👉 Pro tip: you should also add a screenshot or short demo gif in the README to show off the UI. That massively improves adoption on npm/GitHub.

Do you want me to also write a package.json metadata (keywords, description, repo links, etc.) optimized for npm discovery so your package ranks better?