@chrisabdo/video

A lightweight and customizable React video player component.

Installation

npm install @chrisabdo/video

Usage

import { Video } from "@chrisabdo/video";

function App() {
  return (
    <Video
      src="path/to/your/video.mp4"
      progressColor="#3B82F6"
      controlsColor="#FFFFFF"
      textColor="#FFFFFF"
      controlsBackgroundColor="rgba(0, 0, 0, 0.5)"
    />
  );
}

Props

The Video component accepts all standard HTML video attributes in addition to the following custom props:

| Prop | Type | Default | Description | | ------------------------- | ------- | -------------------- | -------------------------------------------- | | src | string | - | The source URL of the video (required) | | progressColor | string | "#3B82F6" | Color of the progress bar | | controlsColor | string | "#FFFFFF" | Color of the control icons | | textColor | string | "#FFFFFF" | Color of the text (time display) | | controlsBackgroundColor | string | "rgba(0, 0, 0, 0.5)" | Background color of the controls bar | | hideControls | boolean | false | If true, hides the control bar | | className | string | - | Additional CSS class for the video container |

Features

• Play/Pause toggle
• Progress bar with seek functionality
• Time display (current time / total duration)
• Volume control
• Fullscreen toggle
• Customizable colors
• Responsive design

Types

interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
  progressColor?: string;
  controlsColor?: string;
  textColor?: string;
  hideControls?: boolean;
  controlsBackgroundColor?: string;
}

Development

To contribute to this project:

1. Clone the repository
2. Install dependencies:

   bun install

3. Make your changes
4. Build the project:

   bun run build

5. Test your changes
6. Submit a pull request

Author

Christopher Abdo

Issues and Feedback

If you encounter any issues or have feedback, please file an issue on the GitHub repository.