https://github.com/mdebbar/youtubeplayer.react
React component for rendering and controlling an embedded Youtube player.
https://github.com/mdebbar/youtubeplayer.react
Last synced: about 1 month ago
JSON representation
React component for rendering and controlling an embedded Youtube player.
- Host: GitHub
- URL: https://github.com/mdebbar/youtubeplayer.react
- Owner: mdebbar
- Created: 2014-12-23T01:42:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-06-03T21:56:44.000Z (almost 10 years ago)
- Last Synced: 2025-03-30T00:41:19.546Z (2 months ago)
- Language: JavaScript
- Size: 164 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
YoutubePlayer.react
===================
React component for rendering and controlling an embedded Youtube player.
The component is written in JavaScript Harmony (ES6), so you need to use the harmony flag with jsx (read about it [here](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx)). It's using the Youtube's Iframe Player API which renders the player in an iframe.
**_The component is built and tested with React v0.12.1_**
### Example:
```js
var Example = React.createClass({
render: function() {
return (
);
},
_onSwitch: function(videoID) {
console.log('The user switched to the video:', videoID);
},
_onPlay: function() {
console.log('The video is now playing');
},
_onPause: function() {
console.log('The video is now paused');
},
_onEnd: function() {
console.log('The video end is reached');
// Let's do something fun :)
// When the end is reached, let's play the video again, muted!
this.refs.player.play();
this.refs.player.mute();
},
});
```
### Missing features/future work
- Provide some examples
- Support playlists
- Allow access to video information e.g. title, duration, url,
- Report buffering progress through callbacks
- Support other options e.g. start-end ranges, playback quality, etc
- Support more APIs e.g. get/set volume, set size, get current time, etc
### More information
- React: http://facebook.github.io/react/
- Youtube Player API: https://developers.google.com/youtube/iframe_api_reference