@chrisabdo/video

@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:

• Clone the repository
• Install dependencies:

  bun install
  

• Make your changes
• Build the project:

  bun run build
  

• Test your changes
• 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.