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

npm i react-cp-youtube

Example

import VideoPlayer, {YouTubeRef, YouTubeOptions} from "react-cp-youtube";
import 'react-cp-youtube/dist/bundle.css';

var player: YouTubeRef;

var opts = {
  autoplay: 1,
  playsinline: 1
}

...

<VideoPlayer
  playing={true}
  time={0}
  videoId={"7v6QXZWylpI"}
  options={opts}
  onTimeUpdate={(time: number, _ : boolean) => console.log("TIME UPDATE: ", rate)}
  onPlay={(_ : boolean) => console.log("PLAY")}
  onPause={(_ : boolean) => 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. | | 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. | | 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, userInitiated : boolean) => void | Is triggered when the user changes the time of the video. The userInitiated parameter indicated wheter the event was triggered by the user or by code. | | onTimeUpdate | (time: number, userInitiated : boolean) => void | Called every 500ms passes current time as parameter . The userInitiated parameter indicated wheter the event was triggered by the user or by code. | | onPlay | (userInitiated : boolean) => void | Is triggered when the user resumes the video. The userInitiated parameter indicated wheter the event was triggered by the user or by code. (NOTE: A time change will trigger onPlay or onPause) | | onPause | (userInitiated : boolean) => void | Is triggered when the user pauses the video. The userInitiated parameter indicated wheter the event was triggered by the user or by code. (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 - [email protected]

Project Link: https://github.com/MaxiMittel/react-cp-youtube