Stateful React YouTube
A React YouTube API Wrapper that allows declarative video control via props. This component is especially useful if you plan on creating an alternative timeline for YouTube videos.
----> Demo <----
Installation
npm install --save stateful-react-youtube
Usage
Include the YouTube API in your html file:
<script src="https://www.youtube.com/player_api"></script>
Fire it up:
;//...//in render:<YouTubeVideo position=thisstateposition videoId=thisstatevideoId playing=thisstateplaying volume=thisstatevolume shouldPrestart=true onPlayingChange=thisonPlayingChange onReady=thishandleOnReady onProgress=thissetPosition onVolumeChange=thishandleVolumeChange ></YouTubeVideo>
API
props (non functions)
Name | Type | Default | Description |
---|---|---|---|
position | Number | 0 | Milliseconds since the beginning of the video. |
videoId | String | "" | YouTube video id (e.g. "JsgpZdGVNys"). |
playing | Boolean | false | Whether YouTube video is playing or not. |
volume | Number | 50 | Volume of the YouTube video. |
shouldPrestart | Boolean | true | When false player displays thumbnail, when true player displays video frame at position, before video is played by the user. |
minPositionChangeToNotify | Number | 100 | Minimum player position change (milliseconds) required for onProgress to be called. |
props (functions)
Name | Type | Default | Description |
---|---|---|---|
onReady({ duration: Number}) | function | noop | Fired when YouTube API is ready. |
onPlayingChange(playing: Boolean) | function | noop | Fires when playing state is changed. |
onProgress(position: Number) | function | noop | Fires every 100ms when the YouTube player is playing. |
onVolumeChange(volume: Number) | function | noop | Fires when the YouTube player volume is changed, or the player is muted/unmuted. |
Escape hatch
You can access the YouTube API by putting a ref on the YouTubeVideo
component and accessing this.refs.yourRefName.player
Todos
- Tests
Other
This library was crafted with care by Moritz Kobrna & Calvin Claus.