React Video Player

A comprehensive, customizable video player component for React applications with TypeScript support. Features both HTML5 video player and YouTube player with extensive customization options and built-in controls.

Installation

npm install @aniruddha1806/video-player

Features

• 🎥 video player with custom controls
• 📺 YouTube video player integration
• 🎛️ Full control customization (play, pause, volume, progress, fullscreen)
• ⏰ Time display and seeking functionality
• 🔊 Volume control with mute/unmute
• ⏩ Forward/backward 10-second skip buttons
• 🖼️ Poster image support
• 📱 Responsive design with mobile support
• 🎨 Extensive styling customization
• 🔧 TypeScript support with full type definitions
• ♿ Accessibility features
• 🚫 Error handling and fallback states
• 🪶 Zero dependencies (except YouTube API for YouTube player)

Quick Start

HTML5 Video Player

import { VideoPlayer } from '@aniruddha1806/video-player';

function App() {
  return (
    <VideoPlayer
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      poster="/video-poster.jpg"
      autoPlay={false}
      muted={false}
      controls={true}
    />
  );
}

YouTube Player

import { YouTubePlayer } from '@aniruddha1806/video-player';

function App() {
  return (
    <YouTubePlayer
      videoId="dQw4w9WgXcQ"
      autoPlay={false}
      muted={false}
      controls={true}
    />
  );
}

Components

VideoPlayer

HTML5 video player with custom controls.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | required | Video source URL | | poster | string | undefined | Poster image URL | | autoPlay | boolean | false | Auto-play video on load | | muted | boolean | false | Start video muted | | loop | boolean | false | Loop video playback | | controls | boolean | true | Show custom controls | | className | string | "" | CSS class for video element | | containerClassName | string | "" | CSS class for container | | controlsClassName | string | "" | CSS class for controls overlay | | playButtonClassName | string | "" | CSS class for play button | | pauseButtonClassName | string | "" | CSS class for pause button | | forwardButtonClassName | string | "" | CSS class for forward button | | backwardButtonClassName | string | "" | CSS class for backward button | | progressBarClassName | string | "" | CSS class for progress bar | | progressFilledClassName | string | "" | CSS class for progress fill | | timeDisplayClassName | string | "" | CSS class for time display | | volumeControlClassName | string | "" | CSS class for volume control | | onPlay | () => void | undefined | Callback when video plays | | onPause | () => void | undefined | Callback when video pauses | | onEnded | () => void | undefined | Callback when video ends | | onTimeUpdate | (time: number) => void | undefined | Callback on time update | | onVolumeChange | (volume: number) => void | undefined | Callback on volume change |

YouTubePlayer

YouTube video player with embedded iframe.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | videoId | string | required | YouTube video ID or URL | | autoPlay | boolean | false | Auto-play video on load | | muted | boolean | false | Start video muted | | loop | boolean | false | Loop video playback | | controls | boolean | true | Show YouTube controls | | startAt | number | 0 | Start time in seconds | | className | string | "" | CSS class for iframe | | containerClassName | string | "" | CSS class for container |

Examples

Basic HTML5 Video Player

Simple video player with default controls:

import { VideoPlayer } from '@aniruddha1806/video-player';

function BasicVideoExample() {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <VideoPlayer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
      />
    </div>
  );
}

Video Gallery

Create a video gallery with multiple players:

import { useState } from 'react';
import { VideoPlayer, YouTubePlayer } from '@aniruddha1806/video-player';

function VideoGalleryExample() {
  const [activeVideo, setActiveVideo] = useState(0);

  const videos = [
    {
      type: 'html5',
      title: 'Big Buck Bunny',
      src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'
    },
    {
      type: 'youtube',
      title: 'Sample YouTube Video',
      videoId: 'dQw4w9WgXcQ'
    },
    {
      type: 'html5',
      title: 'Elephants Dream',
      src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
      poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg'
    }
  ];

  return (
    <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '20px' }}>
      <h2>Video Gallery</h2>
      
      {/* Video Thumbnails */}
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
        gap: '16px',
        marginBottom: '32px'
      }}>
        {videos.map((video, index) => (
          <div
            key={index}
            onClick={() => setActiveVideo(index)}
            style={{
              padding: '12px',
              border: activeVideo === index ? '2px solid #007bff' : '2px solid #e9ecef',
              borderRadius: '8px',
              cursor: 'pointer',
              backgroundColor: activeVideo === index ? '#f8f9fa' : 'white',
              transition: 'all 0.2s ease'
            }}
          >
            <h4 style={{ margin: '0 0 8px 0', fontSize: '14px' }}>{video.title}</h4>
            <p style={{ margin: 0, fontSize: '12px', color: '#666' }}>
              {video.type === 'youtube' ? 'YouTube Video' : 'HTML5 Video'}
            </p>
          </div>
        ))}
      </div>

      {/* Active Video Player */}
      <div style={{ backgroundColor: '#000', borderRadius: '12px', overflow: 'hidden' }}>
        {videos[activeVideo].type === 'youtube' ? (
          <YouTubePlayer
            videoId={videos[activeVideo].videoId}
            controls={true}
          />
        ) : (
          <VideoPlayer
            src={videos[activeVideo].src}
            poster={videos[activeVideo].poster}
            controls={true}
          />
        )}
      </div>
      
      <h3 style={{ marginTop: '20px', textAlign: 'center' }}>
        {videos[activeVideo].title}
      </h3>
    </div>
  );
}

TypeScript Usage

The component provides full TypeScript support:

import { VideoPlayer, YouTubePlayer, VideoPlayerProps, YouTubePlayerProps } from '@aniruddha1806/video-player';
import { useState, useCallback } from 'react';

interface VideoData {
  id: string;
  title: string;
  src: string;
  poster?: string;
  duration?: number;
}

interface VideoPlayerComponentProps {
  videos: VideoData[];
  onVideoSelect: (videoId: string) => void;
}

const VideoPlayerComponent: React.FC<VideoPlayerComponentProps> = ({ 
  videos, 
  onVideoSelect 
}) => {
  const [selectedVideo, setSelectedVideo] = useState<VideoData | null>(videos[0] || null);
  const [playbackTime, setPlaybackTime] = useState<number>(0);

  const handleTimeUpdate = useCallback((time: number): void => {
    setPlaybackTime(time);
  }, []);

  const handleVideoSelect = useCallback((video: VideoData): void => {
    setSelectedVideo(video);
    onVideoSelect(video.id);
  }, [onVideoSelect]);

  const videoPlayerProps: VideoPlayerProps = {
    src: selectedVideo?.src || '',
    poster: selectedVideo?.poster,
    onTimeUpdate: handleTimeUpdate,
    autoPlay: false,
    muted: false,
    controls: true
  };

  return (
    <div>
      {selectedVideo && <VideoPlayer {...videoPlayerProps} />}
      <div>Current time: {Math.floor(playbackTime)}s</div>
    </div>
  );
};