Custoplayer

website·Indexed 30 days ago

https://etesam913.github.io/Custoplayer/

A React.js npm package for creating customizable video players. It includes components for play buttons, volume controls, progress bars, fullscreen toggles, and settings, with support for configuring video qualities and subtitles.

Tokens: 4.6K
Snippets: 28
Records: 30
Agent score: 74%

What's inside Custoplayer

Install Custoplayer
Custoplayer is a React.js npm package used to create customizable video players. It can be installed via npm or yarn.
```
# Using npm
npm install custoplayer

# Using yarn
yarn add custoplayer
```
https://etesam913.github.io/Custoplayer/quick-start/
Implement a Thumbnail Preview Tooltip
To render image thumbnails on hover, set id: "thumbnail" (or "textAndThumbnail") and provide an image atlas. This requires two assets:
1. Image Atlas (atlasImage): A single JPG image containing a grid of all preview thumbnails.
2. Thumbnail VTT File: A metadata file defining the time range and the specific coordinates (xywh) of each thumbnail within the atlas image.
To enable this, you must set the atlasImage property in the configuration and add a <track> element as a child of the <Custoplayer> component with kind="metadata" and id="custoplayer-thumbnails".
```
import { Custoplayer } from 'custoplayer';

<Custoplayer
  src='https://example.com/video.mp4'
  crossOrigin='anonymous'
  values={{
    previewTooltip: {
      id: 'thumbnail',
      atlasImage: 'https://example.com/thumbs.jpg',
    },
  }}
>
  <track
    kind='metadata'
    id='custoplayer-thumbnails'
    src='https://example.com/thumbs.vtt'
    crossOrigin='anonymous'
  />
</Custoplayer>
```
https://etesam913.github.io/Custoplayer/preview-tooltip/
Submit a contribution to Custoplayer
Before committing changes and submitting a Pull Request from your forked branch to the main branch, ensure there are no linting errors by running the lint fix command.
```
yarn lint --fix
```
https://etesam913.github.io/Custoplayer/contributing/
Set up a local development environment for Custoplayer
To contribute to Custoplayer, fork the repository and create a feature branch from main. Follow these steps to set up the monorepo, build the library, and run the development server for the test project.
```
# Install monorepo dependencies
yarn install

# Build the custoplayer library
cd packages/custoplayer && yarn build

# Run the development server for the test project
yarn dev
```
https://etesam913.github.io/Custoplayer/contributing/
Configure volume controls in Custoplayer
To implement volume controls in Custoplayer, you must use a volumeButton and a volumeBar. The available button component is volumeButton1. There are two volume bar options: volumeBar1 (horizontal) and volumeBar2 (vertical). If barId is left undefined, no volume bar will be displayed.
```
item1: {
  id: 'volumeButton1',
  barId: 'volumeBar2', // Use 'volumeBar1' for horizontal, 'volumeBar2' for vertical
  volumeColor: '#a4c3f5',
  barColor: "white",
  buttonColor: "#a4c3f5",
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white"
},
```
https://etesam913.github.io/Custoplayer/components/Volume/

Configure multiple video quality options in Custoplayer

To enable multiple video quality selections (such as 144p, 480p, 1080p, etc.) in Custoplayer, you must complete two steps:

Define Source Tags: Add <source> tags inside the <Custoplayer> component. Each source must have an id following the pattern custoplayer-{quality} (e.g., custoplayer-1080 for 1080p) and a valid src attribute.
Enable Quality Menu: Add a settings button to the values configuration. Use the ID settingsButton1 and set options.quality to true to activate the quality selection menu.

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

export default function QualityExample() {
  return (
    <Custoplayer
      crossOrigin='anonymous'
      values={{
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'settingsButton1',
          settingsMenuOrientation: 'right',
          options: {
            quality: true,
          },
        },
        item2: {
          id: 'progressBar3',
        },
      }}
    >
      <source
        id='custoplayer-1080'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      />

      <source
        id='custoplayer-720'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-720.mp4'
      />

      <source
        id='custoplayer-480'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-480.mp4'
      />
    </Custoplayer>
  );
}

Configure subtitles in Custoplayer

To enable subtitles in Custoplayer, you must perform two steps: first, add <track> tags as children to the <Custoplayer> component; second, configure a settings button to enable the subtitles menu.

For the <track> tags:

Set the label attribute (e.g., 'English').
Set kind='metadata'.
Provide a src URL pointing to a .vtt file.
Set the crossOrigin property to "anonymous" on the Custoplayer component to ensure the VTT files load correctly.

For the settings button:

Add an item to the values prop with id: 'settingsButton1'.
Within that item, set options: { subtitles: true }.

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

export default function SubtitlesExample() {
  return (
    <Custoplayer
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      crossOrigin='anonymous'
      values={{
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'settingsButton1',
          settingsMenuOrientation: 'right',
          options: {
            subtitles: true,
          },
        },
      }}
    >
      <track
        label='English'
        kind='metadata'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-subtitles/English.vtt'
        srcLang='en'
        default
      />
      <track
        label='Spanish'
        kind='metadata'
        srcLang='es'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-subtitles/Spanish.vtt'
      />
    </Custoplayer>
  );
}

Progress Bar configuration properties reference

The following properties can be used to customize the appearance and behavior of the progress bar components:

Property Name	Required	Accepted Values	Description	Default
id	Yes	"progressBar1", "progressBar2", "progressBar3"	Used to render a progressBar.	undefined
barColor	No	Hex or RGB color	Background color of the progressBar.	"white"
progressColor	No	Hex or RGB color	Color of the progress indicator.	"#4ab860"
scrubberColor	No	Hex or RGB color	Color of the scrubber circle.	progressColor or "white"
scrubberBorderColor	No	Hex or RGB color	Border color of the scrubber circle.	Lightened scrubberColor
bufferedColor	No	Hex or RGB color	Color of the buffered/loaded content.	"rgba(0,0,0,0.4)"
hideOnMobile	No	true or false	Hides component if video width < 768px.	false
marginLeft	No	CSS string (e.g. '10px')	Left margin of the progressBar.	"0"
marginRight	No	CSS string (e.g. '10px')	Right margin of the progressBar.	"0"

Implement a Top Progress Bar
To save space in the controls bar, you can place the progress bar above the controls bar using the topProgressBar configuration. It accepts the same properties as the standard progress bar components.
```
topProgressBar: {
  id: 'progressBar1',
  progressColor: '#a4c3f5',
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white",
  bufferedColor: "#B7B7B7"
}
```
https://etesam913.github.io/Custoplayer/components/progress-bars/
Configure Play Button components in Custoplayer
Custoplayer provides two play button variants: playButton1 and playButton2. These are configured via an item object where the id determines which button style is rendered.
```
item1: {
  id: 'playButton1',
  buttonColor: '#a4c3f5',
},
```
https://etesam913.github.io/Custoplayer/components/play-buttons/
Configure the Preview Tooltip
The previewTooltip configuration determines what is displayed when a user hovers over or drags the progress bar. It supports three modes: text-only, thumbnail-only, or a combination of both.
```
previewTooltip: {
  id: 'text', // Options: 'text', 'thumbnail', or 'textAndThumbnail'
  atlasImage: 'https://example.com/thumbs.jpg', // Required only for 'thumbnail' or 'textAndThumbnail'
}
```
https://etesam913.github.io/Custoplayer/preview-tooltip/

Configure the Settings Menu options

The options property accepts an object that controls which settings appear in the menu. These options are conditionally displayed based on the video configuration.

options: {
  // Shows subtitles option if a .vtt file is configured
  subtitles: true,

  // Shows quality option if <source> tags are configured
  quality: true,

  // Shows playback speed options with the specified speed values
  playbackSpeed: [0.25, 0.5, 1, 1.25, 1.5, 2],
}