Atozas Video Player Controls

A comprehensive, customizable video player controls component for React applications with TypeScript support. Features a complete set of controls similar to VLC or MX Player.

Features

• 🎬 Complete Video Controls: Play/pause, seek, volume, fullscreen, and more
• ⚡ Playback Speed Control: Multiple speed options (0.5x to 2x)
• 🎨 Quality Selection: Support for multiple video quality options
• 💬 Subtitle Support: Multiple subtitle track selection
• 📱 Picture-in-Picture: Native PiP support
• 🖥️ Fullscreen Support: Native fullscreen API support
• 📊 Advanced Progress Bar: Interactive with buffering indicators
• 🔊 Volume Control: Volume slider with mute toggle
• ⚙️ Settings Menu: Comprehensive settings panel
• 🎯 Accessibility: Keyboard navigation and screen reader support
• 📱 Responsive Design: Works on desktop and mobile devices
• 🎨 Customizable Styling: Easy to customize with CSS
• ⚡ Auto-hide Controls: Controls automatically hide during playback
• 🔧 TypeScript Support: Full TypeScript definitions included

Installation

npm install atozas-video-player-controls

Quick Start

import React from "react";
import { VideoPlayer } from "atozas-video-player-controls";

function App() {
  return (
    <VideoPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      width="800px"
      height="450px"
      onPlay={() => console.log("Video started")}
      onPause={() => console.log("Video paused")}
    />
  );
}

Advanced Usage

With All Features Enabled

import React from "react";
import { VideoPlayer } from "atozas-video-player-controls";

function App() {
  const qualityOptions = [
    { label: "Auto", value: "auto" },
    { label: "1080p", value: "1080p", resolution: "1920x1080" },
    { label: "720p", value: "720p", resolution: "1280x720" },
    { label: "480p", value: "480p", resolution: "854x480" },
  ];

  const subtitles = [
    { label: "English", value: "en", language: "en" },
    { label: "Spanish", value: "es", language: "es" },
    { label: "French", value: "fr", language: "fr" },
  ];

  return (
    <VideoPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      width="800px"
      height="450px"
      autoPlay={false}
      muted={false}
      loop={false}
      // Advanced features
      playbackRates={[0.5, 0.75, 1, 1.25, 1.5, 2]}
      defaultPlaybackRate={1}
      qualityOptions={qualityOptions}
      defaultQuality="auto"
      subtitles={subtitles}
      defaultSubtitle="off"
      showPlaybackRate={true}
      showQualitySelector={true}
      showSubtitleSelector={true}
      showSettings={true}
      showMiniPlayer={true}
      showPictureInPicture={true}
      // Event handlers
      onPlay={() => console.log("Video started")}
      onPause={() => console.log("Video paused")}
      onTimeUpdate={(time) => console.log("Current time:", time)}
      onVolumeChange={(volume) => console.log("Volume:", volume)}
      onSeek={(time) => console.log("Seek to:", time)}
      onFullscreenChange={(isFullscreen) =>
        console.log("Fullscreen:", isFullscreen)
      }
      onPlaybackRateChange={(rate) => console.log("Playback rate:", rate)}
      onQualityChange={(quality) => console.log("Quality:", quality)}
      onSubtitleChange={(subtitle) => console.log("Subtitle:", subtitle)}
      onPictureInPictureChange={(isPiP) => console.log("PiP:", isPiP)}
    />
  );
}

API Reference

VideoPlayer Props

| Prop | Type | Default | Description | | -------------------------- | --------------------------------- | ------------------------------ | ---------------------------- | | src | string | - | Video source URL (required) | | poster | string | - | Poster image URL | | width | string \| number | '100%' | Player width | | height | string \| number | 'auto' | Player height | | autoPlay | boolean | false | Auto-play video | | muted | boolean | false | Start muted | | loop | boolean | false | Loop video | | preload | 'none' \| 'metadata' \| 'auto' | 'metadata' | Preload strategy | | controls | boolean | false | Show native controls | | className | string | '' | Custom CSS class | | style | React.CSSProperties | - | Inline styles | | playbackRates | number[] | [0.5, 0.75, 1, 1.25, 1.5, 2] | Available playback speeds | | defaultPlaybackRate | number | 1 | Default playback speed | | qualityOptions | QualityOption[] | [] | Available quality options | | defaultQuality | string | '' | Default quality selection | | subtitles | SubtitleTrack[] | [] | Available subtitle tracks | | defaultSubtitle | string | 'off' | Default subtitle selection | | showPlaybackRate | boolean | true | Show playback rate control | | showQualitySelector | boolean | true | Show quality selector | | showSubtitleSelector | boolean | true | Show subtitle selector | | showSettings | boolean | true | Show settings menu | | showMiniPlayer | boolean | true | Show mini player button | | showPictureInPicture | boolean | true | Show PiP button | | onPlay | () => void | - | Play event handler | | onPause | () => void | - | Pause event handler | | onEnded | () => void | - | End event handler | | onTimeUpdate | (time: number) => void | - | Time update handler | | onVolumeChange | (volume: number) => void | - | Volume change handler | | onSeek | (time: number) => void | - | Seek event handler | | onFullscreenChange | (isFullscreen: boolean) => void | - | Fullscreen change handler | | onPlaybackRateChange | (rate: number) => void | - | Playback rate change handler | | onQualityChange | (quality: string) => void | - | Quality change handler | | onSubtitleChange | (subtitle: string) => void | - | Subtitle change handler | | onPictureInPictureChange | (isPiP: boolean) => void | - | PiP change handler |

QualityOption Interface

interface QualityOption {
  label: string;
  value: string;
  resolution?: string;
  bitrate?: string;
}

SubtitleTrack Interface

interface SubtitleTrack {
  label: string;
  value: string;
  language?: string;
  default?: boolean;
}

Examples

Basic Usage

import { VideoPlayer } from "atozas-video-player-controls";

<VideoPlayer
  src="https://example.com/video.mp4"
  width="800px"
  height="450px"
/>;

With Event Handlers

import { VideoPlayer } from "atozas-video-player-controls";

<VideoPlayer
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  autoPlay={false}
  muted={false}
  loop={false}
  onPlay={() => console.log("Video started playing")}
  onPause={() => console.log("Video paused")}
  onTimeUpdate={(time) => console.log("Current time:", time)}
  onVolumeChange={(volume) => console.log("Volume:", volume)}
  onFullscreenChange={(isFullscreen) =>
    console.log("Fullscreen:", isFullscreen)
  }
/>;

With Quality and Subtitle Options

import { VideoPlayer } from "atozas-video-player-controls";

const qualityOptions = [
  { label: "Auto", value: "auto" },
  { label: "1080p", value: "1080p", resolution: "1920x1080" },
  { label: "720p", value: "720p", resolution: "1280x720" },
  { label: "480p", value: "480p", resolution: "854x480" },
];

const subtitles = [
  { label: "English", value: "en", language: "en" },
  { label: "Spanish", value: "es", language: "es" },
  { label: "French", value: "fr", language: "fr" },
];

<VideoPlayer
  src="https://example.com/video.mp4"
  qualityOptions={qualityOptions}
  defaultQuality="auto"
  subtitles={subtitles}
  defaultSubtitle="off"
  onQualityChange={(quality) => console.log("Quality changed to:", quality)}
  onSubtitleChange={(subtitle) => console.log("Subtitle changed to:", subtitle)}
/>;

Custom Styling

import { VideoPlayer } from "atozas-video-player-controls";

<VideoPlayer
  src="https://example.com/video.mp4"
  className="my-custom-player"
  style={{
    borderRadius: "12px",
    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
  }}
/>;

Customization

CSS Customization

You can customize the appearance by overriding the CSS classes:

/* Custom video player styles */
.video-player {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Custom control button styles */
.control-button {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* Custom progress bar styles */
.progress-fill {
  background-color: #ff6b6b;
}

/* Custom volume slider styles */
.volume-slider::-webkit-slider-thumb {
  background: #ff6b6b;
}

/* Custom settings menu styles */
.settings-menu {
  background: rgba(0, 0, 0, 0.95);
  border-radius: 12px;
}

Component Composition

You can also use individual components for more control:

import {
  VideoControls,
  ProgressBar,
  VolumeControl,
  TimeDisplay,
  PlaybackRateSelector,
  QualitySelector,
  SubtitleSelector,
  SettingsMenu,
  ControlButton,
} from "atozas-video-player-controls";

// Use individual components
<VideoControls
  isPlaying={isPlaying}
  currentTime={currentTime}
  duration={duration}
  volume={volume}
  isMuted={isMuted}
  playbackRate={playbackRate}
  playbackRates={playbackRates}
  qualityOptions={qualityOptions}
  currentQuality={currentQuality}
  subtitles={subtitles}
  currentSubtitle={currentSubtitle}
  onPlayPause={handlePlayPause}
  onSeek={handleSeek}
  onVolumeChange={handleVolumeChange}
  onMuteToggle={handleMuteToggle}
  onPlaybackRateChange={handlePlaybackRateChange}
  onQualityChange={handleQualityChange}
  onSubtitleChange={handleSubtitleChange}
/>;

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Development

Setup

git clone https://github.com/atozas/video-player-controls.git
cd video-player-controls
npm install

Build

npm run build

Development

npm run dev

Test

npm test

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

v2.0.0

• ✨ Complete Rewrite: Full VLC/MX Player-like experience
• 🎬 Advanced Controls: Playback speed, quality selection, subtitles
• 📱 Picture-in-Picture: Native PiP support
• ⚙️ Settings Menu: Comprehensive settings panel
• 📊 Buffering Indicators: Visual buffering progress
• 🎨 Modern UI: Glassmorphism design with blur effects
• 📱 Responsive Design: Mobile-optimized controls
• 🔧 TypeScript: Complete type definitions
• 🎯 Accessibility: Keyboard navigation support

v1.0.0

• Initial release
• Basic video controls
• Progress bar with seeking
• Volume control with mute toggle
• Fullscreen support
• Auto-hide controls
• TypeScript support
• Responsive design