Custom Video Player

Custom Video Player is a React-based HTML5 video player with a fully customizable UI, themes, and advanced features such as sections on the progress bar, timestamped thumbnails, and keyboard shortcuts. It is designed to replace the default HTML5 player controls with a sleek, user-friendly interface.

Features

• Custom progress bar with labeled and colored sections.
• Dynamic timestamped thumbnails on hover.
• Custom toolbar with:
  • Play/Pause button.
  • Skip forward/backward by 10 seconds.
  • Skip to next section.
• Settings menu for theme and resolution.
• Customizable themes for colors, icons, and fonts.
• Keyboard shortcuts:
  • F: Toggle fullscreen.
  • Space or K: Play/Pause.
  • L or Right Arrow: Skip forward 10 seconds.
  • J or Left Arrow: Skip backward 10 seconds.

Installation

npm install custom-video-player

Usage

import React from 'react';
import { CustomVidPlayer } from 'custom-video-player';

const App = () => {
  const sections = [
    { start: 0, end: 10, label: 'Intro', color: 'red', labelOn: true },
    { start: 30, end: 60, label: 'Main Topic', color: 'blue', labelOn: true },
    { start: 90, end: 120, label: 'Summary', color: 'green', labelOn: true },
  ];

  const theme = {
    colors: {
      toolbarBg: '#222',
      progressBg: '#444',
      sectionBg: '#555',
      sectionText: 'white',
    },
    icons: {
      play: <i className="custom-icon-play" />,
      pause: <i className="custom-icon-pause" />,
    },
  };

  return (
    <CustomVidPlayer
      videoSrc="https://example.com/video.mp4"
      sections={sections}
      theme={theme}
    />
  );
};

export default App;

Props

| Prop Name | Type | Required | Default | Description | |------------|--------|----------|-----------------------|-----------------------------------------------------------------------------| | videoSrc | String | ✅ | null | URL of the video to be played. | | sections | Array | ❌ | [] | List of video sections with start, end, label, and color. | | theme | Object | ❌ | Default theme object. | Customization options for colors, icons, and fonts. |

Keyboard Shortcuts

| Key | Action | |------------------|----------------------------| | F | Toggle Fullscreen | | Space or K | Play/Pause | | L or → | Skip forward 10 seconds | | J or ← | Skip backward 10 seconds |

Customization

Sections

Sections are optional and are used to highlight parts of the video on the progress bar. Each section can have a start and end time, a label, and a color.

Example:

const sections = [
  { start: 0, end: 10, label: 'Intro', color: 'red', labelOn: true },
];

Themes

Themes allow you to customize colors, fonts, and icons.

Example:

const theme = {
  colors: {
    toolbarBg: '#222',
    progressBg: '#444',
    sectionBg: '#555',
  },
  icons: {
    play: <CustomPlayIcon />,
    pause: <CustomPauseIcon />,
  },
};

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.