Fetching latest commit…
React Vimeo
Usage
var Vimeo = require('react-vimeo');
React.render(
<Vimeo videoId={ videoId } />,
$mountNode
);To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop onError in the component:
function onError(err) {
console.log(err);
};
React.render(
<Video onError={ onError } videoId={ videoId } />
document.querySelector('#your-div')
);If you decide to use just Javascript without any module loader, you can get the global variable window.ReactVimeo (or just ReactVimeo):
Behind the Scene
There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.
So, the semantic HTML structure will be something like this:
<div class='vimeo'>
<div class='vimeo-loading'>
<svg>...</svg>
</div>
<div class='vimeo-image'>
<button type='button' class='vimeo-play-button'>
<svg>...</svg>
</button>
</div>
<div class='video-embed'>
<iframe>...</iframe>
</div>
</div>This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a real functional example that you can follow.
For more details, check out the API below.
Component API
<Vimeo> component:
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| className | string | 'vimeo' | no | className applied to wrapping div |
| onCuechange | func | noop | no | called when the player que changes |
| onError | func | noop | no | called if the video metadata (thumbnail) can't be loaded |
| onFinish | func | noop | no | called when video completes |
| onLoadProgress | func | noop | no | called when part of video has loaded |
| onPause | func | noop | no | called when video is paused |
| onPlay | func | noop | no | called when video is played |
| onPlayProgress | func | noop | no | called when video play has progressed |
| onReady | func | noop | no | called when video has loaded and is ready to play. other event functions will not be called before this one other than onError |
| onSeek | func | noop | no | called when user seeks ahead in video |
| videoId | string | none | yes | The vimeo ID |
Interactive api (play/pause actions, seek to n, etc..) to come in future versions
License
MIT
See the License file.