search

u-wave / react-vimeo

Vimeo player component for React.
https://u-wave.net/react-vimeo
MIT License
217 stars 64 forks source link
react react-components vimeo

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, such as the progress bar, sharing buttons, etc. (requires Vimeo PRO / Business account)
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)
playbackRate number Specify playback rate (requires Vimeo PRO / Business account)
speed bool false Enable playback rate controls (requires Vimeo PRO / Business account)
keyboard bool true Allows for keyboard input to trigger player events.
pip bool false Show the picture-in-picture button in the controlbar and enable the picture-in-picture API.
playsInline bool true Play video inline on mobile devices, to automatically go fullscreen on playback set this parameter to false.
quality string Vimeo Plus, PRO, and Business members can default an embedded video to a specific quality on desktop.
textTrack string Turn captions/subtitles on for a specific language by default.
transparent bool true The responsive player and transparent background are enabled by default, to disable set this parameter to false.
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 video playback is initiated.
onPlaying function Triggered when the video starts playing.
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 changes.
onLoaded function Triggered when a new video is loaded in the player.

Related

License

MIT