Enhanced React Video Player

A modern, feature-rich video player component built with React and TypeScript. This enhanced version includes professional UI, keyboard shortcuts, multiple themes, and comprehensive error handling.

✨ Features

🎮 Interactive Controls

• Play/Pause with spacebar or click
• Seek with arrow keys (10 seconds) or progress bar
• Volume control with arrow keys or hover slider
• Mute/Unmute with 'M' key or button
• Fullscreen toggle with 'F' key or button
• Playback rate selection (0.5x to 2x)

🎨 Modern UI/UX

• Hover controls that appear/disappear smoothly
• Dark and light themes with automatic styling
• Responsive design that works on all screen sizes
• Smooth animations and transitions
• Professional styling with gradients and shadows

🎯 Enhanced Functionality

• Multiple video support with playlist navigation
• Auto-play and loop options
• Buffering indicator with spinner animation
• Error handling with retry functionality
• Keyboard shortcuts for power users
• Accessibility features with focus indicators

🔧 Developer Experience

• TypeScript support with full type definitions
• Customizable props for different use cases
• Clean, modular code with React hooks
• Performance optimized with useCallback and proper event handling

🚀 Quick Start

npm install react-video-player

import VideoPlayer from "react-video-player";

const MyComponent = () => {
  const videos = [
    {
      src: "https://example.com/video.mp4",
      label: "My Video",
      thumbnail: "https://example.com/thumbnail.jpg",
    },
  ];

  return (
    <VideoPlayer
      sources={videos}
      width="100%"
      height="400px"
      autoPlay={false}
      loop={false}
      theme="dark"
    />
  );
};

📋 Props

| Prop | Type | Default | Description | | -------------- | ------------------- | -------- | ---------------------- | | sources | VideoSource[] | Required | Array of video sources | | width | number \| string | '100%' | Player width | | height | number \| string | 'auto' | Player height | | autoPlay | boolean | false | Auto-play videos | | loop | boolean | false | Loop current video | | showControls | boolean | true | Show control overlay | | theme | 'light' \| 'dark' | 'dark' | UI theme |

VideoSource Interface

interface VideoSource {
  src: string; // Video URL
  label?: string; // Display name
  thumbnail?: string; // Thumbnail image
  quality?: string; // Quality label (future use)
}

⌨️ Keyboard Shortcuts

| Key | Action | | ------- | -------------------------------- | | Space | Play/Pause | | ← → | Seek 10 seconds backward/forward | | ↑ ↓ | Volume up/down | | M | Mute/Unmute | | F | Toggle Fullscreen |

🎨 Themes

The player supports two themes:

• Dark Theme (default): Professional dark interface
• Light Theme: Clean light interface for bright environments

<VideoPlayer theme="light" sources={videos} />

🔧 Advanced Usage

Multiple Videos with Playlist

const playlist = [
  {
    src: "video1.mp4",
    label: "Introduction",
    thumbnail: "thumb1.jpg",
  },
  {
    src: "video2.mp4",
    label: "Tutorial",
    thumbnail: "thumb2.jpg",
  },
];

<VideoPlayer sources={playlist} />;

Auto-play with Loop

<VideoPlayer sources={videos} autoPlay={true} loop={true} />

Custom Dimensions

<VideoPlayer sources={videos} width={800} height={450} />

🎯 Demo

Check out the interactive demo to see all features in action:

import { VideoPlayerDemo } from "react-video-player";

<VideoPlayerDemo />;

🔄 Migration from Basic Version

If you're upgrading from the basic video player:

1. Add CSS import: The new version requires the CSS file
2. Update props: New props like theme, autoPlay, loop are available
3. Enhanced interface: The VideoSource interface now supports quality field
4. Better error handling: Errors are now displayed with retry options

🛠️ Development

# Install dependencies
npm install

# Run demo
npm start

# Build
npm run build

📝 Changelog

v2.0.0 - Enhanced Version

• ✨ Modern UI with hover controls
• ⌨️ Keyboard shortcuts
• 🎨 Dark/light themes
• 🔄 Auto-play and loop options
• 📱 Responsive design
• ⚡ Performance optimizations
• 🎯 Better error handling
• ♿ Accessibility improvements

v1.0.0 - Basic Version

• Basic video controls
• Simple UI
• Core functionality

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Sample videos from Google's Video Test Assets
• Icons and emojis for controls
• React community for inspiration