React-cp-youtube NPM

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

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.