@u-wave/react-vimeo

Vimeo player component for React.

Usage no npm install needed!

<script type="module">
  import uWaveReactVimeo from 'https://cdn.skypack.dev/@u-wave/react-vimeo';
</script>

README

@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

Name Type Default Description
video number, string A Vimeo video ID or URL.
id string DOM ID for the player element.
className string CSS className for the player element.
style object Inline style for container element.
width number, string Width of the player element.
height number, string Height of the player element.
paused bool Pause the video.
volume number The playback volume as a number between 0 and 1.
start number The time in seconds at which to start playing the video.
autopause bool true Pause this video automatically when another one plays.
autoplay bool false Automatically start playback of the video. Note that this won’t work on some devices.
showByline bool true Show the byline on the video.
color string Specify the color of the video controls. Colors may be overridden by the embed settings of the video. (Ex: "ef2f9f")
dnt bool false Blocks the player from tracking any session data, including all cookies and analytics
controls bool true Hide all elements in the player (play bar, sharing buttons, etc).
loop bool false Play the video again when it reaches the end.
showPortrait bool true Show the portrait on the video.
showTitle bool true Show the title on the video.
muted bool false Starts in a muted state to help with autoplay
background bool false Starts in a background state with no controls to help with autoplay
responsive bool false Enable responsive mode and resize according to parent element (experimental)
speed bool false Enable playback rate controls (requires Vimeo PRO / Business account)
onReady function Sent when the Vimeo player API has loaded. Receives the Vimeo player object in the first parameter.
onError function Sent when the player triggers an error.
onPlay function Triggered when the video plays.
onPause function Triggered when the video pauses.
onEnd function Triggered any time the video playback reaches the end. Note: when loop is turned on, the ended event will not fire.
onTimeUpdate function Triggered as the currentTime of the video updates. It generally fires every 250ms, but it may vary depending on the browser.
onProgress function Triggered as the video is loaded. Reports back the amount of the video that has been buffered.
onSeeked function Triggered when the player seeks to a specific time. An onTimeUpdate event will also be fired at the same time.
onTextTrackChange function Triggered when the active text track (captions/subtitles) changes. The values will be null if text tracks are turned off.
onCueChange function Triggered 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.
onCuePoint function Triggered when the current time hits a registered cue point.
onVolumeChange function Triggered 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.
onPlaybackRateChange function Triggered when the playback rate changws.
onLoaded function Triggered when a new video is loaded in the player.

Related

License

MIT