Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maximittel/react-cp-youtube
A custom YouTube player to gain more access about the controls.
https://github.com/maximittel/react-cp-youtube
Last synced: 23 days ago
JSON representation
A custom YouTube player to gain more access about the controls.
- Host: GitHub
- URL: https://github.com/maximittel/react-cp-youtube
- Owner: MaxiMittel
- License: other
- Created: 2020-12-21T20:37:38.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-03T16:50:33.000Z (almost 4 years ago)
- Last Synced: 2024-12-15T22:48:41.626Z (23 days ago)
- Language: TypeScript
- Homepage:
- Size: 5.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Custom Youtube Player
See it in action
·
Report Bug
·
Request Feature
## Information
**NOTE: This is stil under development. Don't use in production.**
This React component wraps custom controls around a YouTube video for better information about what the user is doing.
## Preview
## Install
```sh
npm i react-cp-youtube
```
## Example
```tsx
import VideoPlayer, {YouTubeRef, YouTubeOptions} from "react-cp-youtube";
import 'react-cp-youtube/dist/bundle.css';
var player: YouTubeRef;
var opts = {
autoplay: 1,
playsinline: 1
}
...
console.log("TIME UPDATE: ", rate)}
onPlay={() => console.log("PLAY")}
onPause={() => console.log("PAUSE")}
ytRef={(ref: YouTubeRef) => (player = ref)}
/>
...
const stopPlayer = () =>{
if(player)
player.getInternalPlayer().stopVideo();
}
```
## Props
Changing `playing`, `time`, `rate` or `videoId` will result in the player changing those attributes. E.g Changing `time` will result in the player skipping to the provided second.
| name | type | description |
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `playing` | `boolean` | Changes the video state to either playing or paused. |
| `time` | `number` | Sets the time in seconds. |
| `rate` | `number` | Sets the playback rate of the video. |
| `videoId` | `string` | Sets the id of the video currently played. |
| `options` | `YouTubeOptions` | Sets the YouTube iframe parameters. More information [here](https://developers.google.com/youtube/player_parameters#Parameters). |
| `disableKb` | `boolean` | If set to true all keyboard interactions will be blocked. |
| `ytRef` | `(ref: YouTubeRef) => void` | Will pass a reference to the js api of the iframe. More information [here](https://developers.google.com/youtube/iframe_api_reference#Functions). |
| `onPlaybackRateChange` | `(rate: number) => void` | Is triggered when the user changes the playback rate. (Coming soon) |
| `onEnd` | `() => void` | Is triggered when the current video finished playing. |
| `onTimeChange` | `(time: number) => void` | Is triggered when the user changes the time of the video. |
| `onTimeUpdate` | `(time: number) => void` | Called every `500ms` passes current time as parameter |
| `onPlay` | `() => void` | Is triggered when the user resumes the video. (NOTE: A time change will trigger `onPlay` or `onPause`) |
| `onPause` | `() => void` | Is triggered when the user pauses the video. (NOTE: A time change will trigger `onPlay` or `onPause`) |
| `onReady` | `() => void` | Called when the state of the player changes to ready. |
| `onError` | `(error: number) => void` | Handles errors of the YouTube iframe. |
| `onPlaybackQualityChange` | `(quality: string) => void` | Called when the video quality of the player changed. Passes the new quality. |
| `onStateChange` | `(state: any) => void` | Called when state of the player changes. Passes the new state. |
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Maximilian Mittelhammer - [@maxi_maximittel](https://twitter.com/maxi_maximittel) - [email protected]
Project Link: [https://github.com/MaxiMittel/react-cp-youtube](https://github.com/MaxiMittel/react-cp-youtube)