react-native-vimeo-iframe

React Native Vimeo Iframe

React Native Vimeo Iframe is a library to render Vimeo videos in a React Native app. This component allows you to embed a Vimeo video in your app and have full access to the Vimeo player JS API (more information https://developer.vimeo.com/player/js-api).

Installation

1. Go through the instructions for installing the React Native Webview library: https://github.com/react-native-webview/react-native-webview.
2. Run npm install react-native-vimeo-iframe or yarn add react-native-vimeo-iframe within your project.
3. Compile and build to make sure everything is set up properly.

Usage

  const videoCallbacks = {
    timeupdate: (data: any) => console.log('timeupdate: ', data),
    play: (data: any) => console.log('play: ', data),
    pause: (data: any) => console.log('pause: ', data),
    fullscreenchange: (data: any) => console.log('fullscreenchange: ', data),
    ended: (data: any) => console.log('ended: ', data),
    controlschange: (data: any) => console.log('controlschange: ', data),
  };

  return (
     <Vimeo
            videoId={'712158285'}
            params={'api=1&autoplay=0'}
            handlers={videoCallbacks}
          />
  )

Supported listeners

'controlschange', // The visibility of the controls changed.
'fullscreenchange', // The orientation was changed.
'audioprocess', // A entrada do buffer de ScriptProcessorNode está pronta para ser processada
'canplay', // The browser can play the file, but estimates that there will not be enough data to play the file without interruption to reload the buffer.
'canplaythrough', // The browser estimates that it will be able to play the file without interruption until the end.
'complete', // OfflineAudioContext rendering is finished.
'durationchange', // The duration attribute has been updated.
'emptied', // Absence of content. For example, this event is sent if the media has been loaded (or partially) and the load() method has been called to reload the content.
'ended', // Playback ended due to end of content
'loadeddata', // The first frame of media has been loaded.
'loadedmetadata', // The metadata has been loaded.
'pause', // Playback has been paused.
'play', // Playback has started.
'playing', // Playback is ready to start after being paused, or delayed due to lack of data.
'ratechange', // Playback rate has changed.
'seeked', // Search operation completed.
'seeking', // Search operation started.
'stalled', // The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
'suspend', // Media data loading has been suspended.
'timeupdate', // The time indicated by the currentTime attribute has been updated.
'volumechange', // The volume has changed.
'waiting'

Available Props

Name	Type	Default	Description
handlers	{ [key: string]: any }	{}	Listeners to be attached in the Vimeo Player
videoId	string	undefined	The video id which will be rendered
params	string	undefined	Extra params to be attached on the vimeo player url
reference	string	undefined	In order to support private videos you can specify the reference prop
otherProps	WebViewProps	{}	To customize the webview that wraps the player, you can specify additional props

Example

If you want to see MetaLabs-inc/react-native-vimeo-iframe in action, just move into the example folder and run yarn && cd ios && pod install && cd .. && yarn ios or yarn && yarn android. By seeing its source code, you will have a better understanding of the library usage.

Contributors

Marco Fiorito

Douglas Rosa

Felipe Najson

JB Paul

Salman Khan

Acknowledgements

• @Myagi for react-native-vimeo, I based on that library to make that library with the latest versions of react-native.