Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vikrantaroraa/javascript-video-player
📹 A simple video player made in React.js for the web.
https://github.com/vikrantaroraa/javascript-video-player
component javascript library player react react-component video video-player
Last synced: about 10 hours ago
JSON representation
📹 A simple video player made in React.js for the web.
- Host: GitHub
- URL: https://github.com/vikrantaroraa/javascript-video-player
- Owner: vikrantaroraa
- Created: 2023-05-05T09:13:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-11T11:55:17.000Z (over 1 year ago)
- Last Synced: 2024-11-15T18:16:44.115Z (2 months ago)
- Topics: component, javascript, library, player, react, react-component, video, video-player
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/js-video-player
- Size: 862 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# js-video-player
A simple video player made in React.js for the web.
## Installation
Install js-video-player with npm
```bash
npm i js-video-player
```
## Usage
```javascript
import { CustomVideoPlayer } from "js-video-player";
function App() {
return ;
}
```
## Props
> ### :memo: **Note**: All props are optional
- `videoUrl` : string
```
The link of the video that you want to play. By default the video player plays the video hosted at "https://blog.addpipe.com/static/short.mp4"
```
## controls container props
- `controlsVariant` : string
- `controlsContainerStyle` : object
```
The `controlsVariant` prop only takes 2 values `bottom` and `top`. Passing 'top' will place the controls container at the top of video player. Its value is `bottom` by default.
The controls container is the part that you see at the bottom in the component. It contains all the controls i.e. play/pause button, progress bar, volume control and playback speed dropdown.
```
> :memo: **Note:** Please note that passing anything other than `top` or `bottom` to `controlsVariant` prop will result in an error.
## play and pause props
- `UserPlayIcon` : ReactNode
- `UserPauseIcon` : ReactNode
- `playAndPauseStyle` : object
```
The player comes with its own set of play and pause icons. If you want, you can also pass your own play and pause icons using `UserPlayIcon` and `UserPauseIcon` props.
```
> :memo: **Note:** Please note that the props `UserPlayIcon` and `UserPauseIcon` start with capital letter U. This is because you will be passing a react node that can be directly used as a component.
## video duration and progress bar props
- `durationAndProgressBarStyle` : object
- `videoDurationStyle` : object
- `progressBarContainerStyle` : object
- `progressBarStyle` : object
## volume icon and range styles
- `UserVolumeHighIcon`: ReactNode
- `UserVolumeMuteIcon`: ReactNode
- `volumeIconStyle` : object
- `volumeRangeStyle` : object
- `volumeIconAndRangeStyle` : object
```
The player comes with its own set of volume and mute icons. If you want, you can also pass your own volume and mute icons using `UserVolumeHighIcon` and `UserVolumeMuteIcon` props.
```
> :memo: **Note:** Please note that the props `UserVolumeHighIcon` and `UserVolumeMuteIcon` start with capital letter U. This is because you will be passing a react node that can be directly used as a component.
## playback speed select props
- `userPlaybackSpeedOptions`: Array of strings
- `userDefaultSelectedSpeedOption` : string
- `playbackSpeedSelectStyle` : object
- `playbackSpeedSelectOptionsStyle` : object
```
The player comes with its own set of playback speed options. If you want you can also pass your own playback speed options using `userPlaybackSpeedOptions` prop that takes an array of string values where each entry in the array is a playback speed option.
The prop `userDefaultSelectedSpeedOption` is used to determine the default selected option for the playback speed options array that the user provides. Since the video plays at normal speed after loading, the value of this prop should be normal or 1x or 1X or 1 depending on what is the normal speed passed in the options array in `userPlaybackSpeedOptions` prop.
For better understanding, see example below.
```
> :memo: **Note:** As mentioned above the `userDefaultSelectedSpeedOption` prop is used to determine the default selected value for the playback speed options array that the user passes, therefore this becomes a necessary prop when `userPlaybackSpeedOptions` prop is used. If this prop is not passed, then after loading, the video will play at normal speed but the selected speed showing in the dropdown would be the first value in the `userPlaybackSpeedOptions` array.
## passing props to `` component
```javascript
import { CustomVideoPlayer } from "js-video-player";
function App() {
return (
);
}
```