Home

Awesome

@u-wave/react-vimeo

Vimeo player component for React.

Install - Usage - Demo - Props

Install

npm install --save @u-wave/react-vimeo

Usage

Demo - Demo source code

import Vimeo from '@u-wave/react-vimeo';

<Vimeo
  video="x2to0hs"
  autoplay
/>

Props

NameTypeDefaultDescription
videonumber, stringA Vimeo video ID or URL.
idstringDOM ID for the player element.
classNamestringCSS className for the player element.
styleobjectInline style for container element.
widthnumber, stringWidth of the player element.
heightnumber, stringHeight of the player element.
pausedboolPause the video.
volumenumberThe playback volume as a number between 0 and 1.
startnumberThe time in seconds at which to start playing the video.
autopausebooltruePause this video automatically when another one plays.
autoplayboolfalseAutomatically start playback of the video. Note that this won’t work on some devices.
showBylinebooltrueShow the byline on the video.
colorstringSpecify the color of the video controls. Colors may be overridden by the embed settings of the video. (Ex: "ef2f9f")
dntboolfalseBlocks the player from tracking any session data, including all cookies and analytics.
controlsbooltrueHide all elements in the player, such as the progress bar, sharing buttons, etc. (requires Vimeo PRO / Business account)
loopboolfalsePlay the video again when it reaches the end.
showPortraitbooltrueShow the portrait on the video.
showTitlebooltrueShow the title on the video.
mutedboolfalseStarts in a muted state to help with autoplay
backgroundboolfalseStarts in a background state with no controls to help with autoplay
responsiveboolfalseEnable responsive mode and resize according to parent element (experimental)
playbackRatenumberSpecify playback rate (requires Vimeo PRO / Business account)
speedboolfalseEnable playback rate controls (requires Vimeo PRO / Business account)
keyboardbooltrueAllows for keyboard input to trigger player events.
pipboolfalseShow the picture-in-picture button in the controlbar and enable the picture-in-picture API.
playsInlinebooltruePlay video inline on mobile devices, to automatically go fullscreen on playback set this parameter to false.
qualitystringVimeo Plus, PRO, and Business members can default an embedded video to a specific quality on desktop.
textTrackstringTurn captions/subtitles on for a specific language by default.
transparentbooltrueThe responsive player and transparent background are enabled by default, to disable set this parameter to false.
onReadyfunctionSent when the Vimeo player API has loaded. Receives the Vimeo player object in the first parameter.
onErrorfunctionSent when the player triggers an error.
onPlayfunctionTriggered when video playback is initiated.
onPlayingfunctionTriggered when the video starts playing.
onPausefunctionTriggered when the video pauses.
onEndfunctionTriggered any time the video playback reaches the end. Note: when loop is turned on, the ended event will not fire.
onTimeUpdatefunctionTriggered as the currentTime of the video updates. It generally fires every 250ms, but it may vary depending on the browser.
onProgressfunctionTriggered as the video is loaded. Reports back the amount of the video that has been buffered.
onSeekedfunctionTriggered when the player seeks to a specific time. An onTimeUpdate event will also be fired at the same time.
onTextTrackChangefunctionTriggered when the active text track (captions/subtitles) changes. The values will be null if text tracks are turned off.
onCueChangefunctionTriggered when the active cue for the current text track changes. It also fires when the active text track changes. There may be multiple cues active.
onCuePointfunctionTriggered when the current time hits a registered cue point.
onVolumeChangefunctionTriggered when the volume in the player changes. Some devices do not support setting the volume of the video independently from the system volume, so this event will never fire on those devices.
onPlaybackRateChangefunctionTriggered when the playback rate changes.
onLoadedfunctionTriggered when a new video is loaded in the player.

Related

License

MIT