cvp-prewcioo

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.