@chrisabdo/video NPM

@chrisabdo/video

A lightweight and customizable React video player component.

Demo Video

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;
}