Custoplayer

A React.js npm package that allows for the rapid creation of customizable video players.

Demo Video

https://github.com/Etesam913/Custoplayer/assets/55665282/fedcb5a5-ec94-4fe0-b554-2bf78cf62c6a

Documentation Page

📦 Installation

npm

npm install custoplayer

yarn

yarn add custoplayer

💻 Example Usage

import React from 'react';
import { Custoplayer } from 'custoplayer';

function CustoplayerExample() {
  return (
    <Custoplayer
      poster='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/custoplayer-demo-poster.png'
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/compressed-custoplayer-demo.mp4'
      values={{
        previewTooltip: {
          id: 'text',
        },
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'playButton1',
          buttonColor: '#b7cef4',
        },
        item2: {
          id: 'volumeButton1',
          barId: 'volumeBar2',
          volumeColor: '#a4c3f5',
          buttonColor: '#a4c3f5',
        },
        item3: {
          id: 'currentTime',
          textColor: '#b7cef4',
        },
        item4: {
          id: 'progressBar1',
          progressColor: '#a4c3f5',
        },
        item5: {
          id: 'duration',
          textColor: '#b7cef4',
        },
        item6: {
          id: 'settingsButton1',
          buttonColor: '#a4c3f5',
          settingsMenuColor: '#a4c3f5',
          settingsMenuOrientation: 'left',
          options: {
            playbackSpeed: [0.25, 0.5, 1, 1.5, 2],
          },
        },
        item7: {
          id: 'fullscreenButton1',
          buttonColor: '#b7cef4',
        },
      }}
    />
  );
}

export default CustoplayerExample;

Overview

Things you can customize:

🎥 Types of Video Elements

• It's your choice regarding what you want for your video player.
• The inclusion or absence of a play button, volume button/slider, progress bar, fullscreen button, or a settings button is all up to you.

📍 The Location of Video Elements

• Maybe you want your play button to be on the right edge of the video and the fullscreen button to be on the left edge of the video.
• Alternatively, you may want your progress bar to be to the right of the play button.
• Changing the location of video elements in a custoplayer component is very easy to do through the item prop.

💄 The Appearance of Video Elements

• Changing the appearance of video elements is important when trying to create or match a brand identity.
• The colors of a play buttons, progress bar, volume bar, fullscreen button, settings button, and more can be customized.
• In addition, there are different variants of a component.

See More at the Documentation Page