https://github.com/etesam913/custoplayer
A React.js npm package that allows for the rapid creation of customizable video players.
https://github.com/etesam913/custoplayer
javascript npm react typescript video video-player video-player-library
Last synced: over 1 year ago
JSON representation
A React.js npm package that allows for the rapid creation of customizable video players.
- Host: GitHub
- URL: https://github.com/etesam913/custoplayer
- Owner: Etesam913
- License: mit
- Created: 2023-01-20T01:50:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-06T03:46:58.000Z (over 2 years ago)
- Last Synced: 2025-03-20T22:08:54.677Z (over 1 year ago)
- Topics: javascript, npm, react, typescript, video, video-player, video-player-library
- Language: TypeScript
- Homepage: https://etesam913.github.io/Custoplayer/
- Size: 4.25 MB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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
```jsx
import React from 'react';
import { Custoplayer } from 'custoplayer';
function CustoplayerExample() {
return (
);
}
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.