const onPlay = (data) => {
  // data is an object containing properties specific to that event
};
player.on('play', onPlay);

const onPlay = (data) => {
  // data is an object containing properties specific to that event
};
player.on('play', onPlay);
// If later on you decide that you don’t need to listen for play anymore.
player.off('play', onPlay);
// Alternatively, `off` can be called with just the event name to remove all
// listeners.
player.off('play');

player.loadVideo(76979871).then((id) => {
// the video successfully loaded
}).catch((error) => {
  switch (error.name) {
    case 'TypeError':
      // the id was not a number
      break;
    case 'PasswordError':
      // the video is password-protected and the viewer needs to enter the
      // password first
      break;
    case 'PrivacyError':
      // the video is password-protected or private
      break;
    default:
      // some other error occurred
      break;
  }
});

player.ready().then(() => {
  // the player is ready
});

player.enableTextTrack('en').then((track) => {
  // track.language = the iso code for the language
  // track.kind = 'captions' or 'subtitles'
  // track.label = the human-readable label
}).catch((error) => {
  switch (error.name) {
    case 'InvalidTrackLanguageError':
      // no track was available with the specified language
      break;
    case 'InvalidTrackError':
      // no track was available with the specified language and kind
      break;
    default:
      // some other error occurred
      break;
  }
});

player.disableTextTrack().then(() => {
  // the track was disabled
}).catch((error) => {
  // an error occurred
});

player.pause().then(() => {
// the video was paused
}).catch((error) => {
  switch (error.name) {
    case 'PasswordError':
      // the video is password-protected and the viewer needs to enter the
      // password first
      break;
    case 'PrivacyError':
      // the video is private
      break;
    default:
      // some other error occurred
      break;
  }
});

player.play().then(() => {
// the video was played
}).catch((error) => {
  switch (error.name) {
    case 'PasswordError':
      // the video is password-protected and the viewer needs to enter the
      // password first
      break;
    case 'PrivacyError':
      // the video is private
      break;
    default:
      // some other error occurred
      break;
    }
});

player.unload().then(() => {
  // the video was unloaded
}).catch((error) => {
  // an error occurred
});

player.destroy().then(() => {
  // the player was destroyed
}).catch((error) => {
  // an error occurred
});

player.requestFullscreen().then(() => {
  // the player entered fullscreen
}).catch((error) => {
  // an error occurred
});

player.exitFullscreen().then(() => {
  // the player exits fullscreen
}).catch((error) => {
  // an error occurred
});

player.getFullscreen().then((fullscreen) => {
  // fullscreen = whether fullscreen is turned on or off
}).catch((error) => {
  // an error occurred
});

player.requestPictureInPicture().then(() => {
  // the player entered picture-in-picture
}).catch((error) => {
  // an error occurred
});

player.exitPictureInPicture().then(() => {
  // the player exits picture-in-picture
}).catch((error) => {
  // an error occurred
});

player.getPictureInPicture().then((pip) => {
  // pip = whether picture-in-picture is turned on or off
}).catch((error) => {
  // an error occurred
});

player.remotePlaybackPrompt().then(() => {
// viewer has been prompted
}).catch((error) => {
  switch (error.name) {
    case 'NotFoundError':
      // remote playback is not supported or there is no device available
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getRemotePlaybackAvailability().then((remotePlaybackAvailable) => {
  // remotePlaybackAvailable = whether there is a remote playback device available or not
}).catch((error) => {
  // an error occurred
})

player.getRemotePlaybackState().then((remotePlaybackState) => {
  // remotePlaybackState === 'connecting': player is attempting to connect to the remote device
  // remotePlaybackState === 'connected': player successfully connected and is playing on the remote playback device
  // remotePlaybackState === 'disconnected': player is not connected to a remote playback device
}).catch((error) => {
  // an error occurred
})

player.getAutopause().then((autopause) => {
  // autopause = whether autopause is turned on or off
}).catch((error) => {
  switch (error.name) {
    case 'UnsupportedError':
      // Autopause is not supported with the current player or browser
      break;
    default:
      // some other error occurred
      break;
  }
});

player.setAutopause(false).then((autopause) => {
  // autopause was turned off
}).catch((error) => {
  switch (error.name) {
    case 'UnsupportedError':
      // Autopause is not supported with the current player or browser
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getBuffered().then((buffered) => {
  // buffered = an array of the buffered video time ranges.
}).catch((error) => {
  // an error occurred
});

player.getChapters().then((chapters) => {
  // chapters = an array of chapters objects
}).catch((error) => {
  // an error occurred
});

{
  "startTime":  15,
  "title":      "Chapter Title",
  "index":      1
}

player.getCurrentChapter().then((chapter) => {
  // chapter = a chapter object
}).catch((error) => {
  // an error occurred
});

player.getColor().then((color) => {
  // color = the hex color of the player
}).catch((error) => {
  // an error occurred
});

player.getColors().then((colors) => {
  // colors = [primary, accent, text/icon, background]
}).catch((error) => {
  // an error occurred
});

player.setColor('#00adef').then((color) => {
  // color was successfully set
}).catch((error) => {
  switch (error.name) {
    case 'TypeError':
      // the string was not a valid hex or rgb color
      break;
    case 'EmbedSettingsError':
      // the owner of the video has chosen to use a specific color
      break;
    default:
      // some other error occurred
      break;
  }
});

player.setColors(['abc', 'def', '123', '456']).then((color) => {
  // colors were successfully set
  // Array order: [primary, accent, text/icon, background]
}).catch((error) => {
  switch (error.name) {
    case 'TypeError':
      // the string was not a valid hex or rgb color
      break;
    case 'EmbedSettingsError':
      // the owner of the video has chosen to use a specific color
      break;
    default:
      // some other error occurred
      break;
  }
});

player.addCuePoint(15, {
  customKey: 'customValue'
}).then((id) => {
  // cue point was added successfully
}).catch((error) => {
  switch (error.name) {
    case 'UnsupportedError':
      // cue points are not supported with the current player or browser
      break;
    case 'RangeError':
      // the time was less than 0 or greater than the video’s duration
      break;
    default:
      // some other error occurred
      break;
  }
});

player.removeCuePoint('09ecf4e4-b587-42cf-ad9f-e666b679c9ab').then((id) => {
  // cue point was removed successfully
}).catch((error) => {
  switch (error.name) {
    case 'UnsupportedError':
      // cue points are not supported with the current player or browser
      break;
    case 'InvalidCuePoint':
      // a cue point with the id passed wasn’t found
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getCuePoints().then((cuePoints) => {
  // cuePoints = an array of cue point objects
}).catch((error) => {
  switch (error.name) {
    case 'UnsupportedError':
      // cue points are not supported with the current player or browser
      break;
    default:
      // some other error occurred
      break;
  }
});

{
  "time": 15,
  "data": {
      "customKey": "customValue"
  },
  "id": "09ecf4e4-b587-42cf-ad9f-e666b679c9ab"
}

player.getCurrentTime().then((seconds) => {
  // seconds = the current playback position
}).catch((error) => {
  // an error occurred
});

player.setCurrentTime(30.456).then((seconds) => {
  // seconds = the actual time that the player seeked to
}).catch((error) => {
  switch (error.name) {
    case 'RangeError':
      // the time was less than 0 or greater than the video’s duration
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getDuration().then((duration) => {
  // duration = the duration of the video in seconds
}).catch((error) => {
  // an error occurred
});

player.getEnded().then((ended) => {
  // ended = whether or not the video has ended
}).catch((error) => {
  // an error occurred
});

player.getLoop().then((loop) => {
  // loop = whether loop is turned on or not
}).catch((error) => {
  // an error occurred
});

player.setLoop(true).then((loop) => {
  // loop was turned on
}).catch((error) => {
  // an error occurred
});

player.getMuted().then((muted) => {
  // muted = whether muted is turned on or not
}).catch((error) => {
  // an error occurred
});

player.setMuted(true).then((muted) => {
  // muted was turned on
}).catch((error) => {
  // an error occurred
});

player.getPaused().then((paused) => {
  // paused = whether or not the player is paused
}).catch((error) => {
  // an error occurred
});

player.getPlaybackRate().then((playbackRate) => {
  // playbackRate = a numeric value of the current playback rate
}).catch((error) => {
  // an error occurred
});

player.setPlaybackRate(0.5).then((playbackRate) => {
  // playback rate was set
}).catch((error) => {
  switch (error.name) {
    case 'RangeError':
      // the playback rate was less than 0 or greater than 2
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getPlayed().then((played) => {
  // played = array values of the played video time ranges.
}).catch((error) => {
  // an error occurred
});

player.getSeekable().then((seekable) => {
  // seekable = array values of the seekable video time ranges.
}).catch((error) => {
  // an error occurred
});

player.getSeeking().then((seeking) => {
  // seeking = whether the player is seeking or not
}).catch((error) => {
  // an error occurred
});

player.getTextTracks().then((tracks) => {
  // tracks = an array of track objects
}).catch((error) => {
  // an error occurred
});

{
    "label":    "English CC",
    "language": "en",
    "kind":     "captions",
    "mode":     "showing"
}

player.getVideoEmbedCode().then((embedCode) => {
  // embedCode = <iframe> embed code
}).catch((error) => {
  // an error occurred
});

player.getVideoId().then((id) => {
  // id = the video id
}).catch((error) => {
  // an error occurred
});

player.getVideoTitle().then((title) => {
  // title = the title of the video
}).catch((error) => {
  // an error occurred
});

player.getVideoWidth().then((width) => {
  // width = the width of the video that is currently playing
}).catch((error) => {
  // an error occurred
});

player.getVideoHeight().then((height) => {
  // height = the height of the video that is currently playing
}).catch((error) => {
  // an error occurred
});

Promise.all([player.getVideoWidth(), player.getVideoHeight()]).then((dimensions) => {
  var width  = dimensions[0];
  var height = dimensions[1];
});

player.getVideoUrl().then((url) => {
  // url = the vimeo.com url for the video
}).catch((error) => {
  switch (error.name) {
    case 'PrivacyError':
      // the url isn’t available because of the video’s privacy setting
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getVolume().then((volume) => {
  // volume = the volume level of the player
}).catch((error) => {
  // an error occurred
});

player.setVolume(0.5).then((volume) => {
  // volume was set
}).catch((error) => {
  switch (error.name) {
    case 'RangeError':
      // the volume was less than 0 or greater than 1
      break;
    default:
      // some other error occurred
      break;
  }
});

npm install @vimeo/player timing-object

<div id="handstick"></div>

import Player from '@vimeo/player';
import {TimingObject} from 'timing-object';
const player = new Player('handstick', {
  id:    19231868,
  width: 640
});
const timingObject = new TimingObject();
player.setTimingSrc(timingObject)
// any update to the timing object will reflect in the player
player.setTimingSrc(timingObject, {role: 'controller'})
// any update to the player will reflect in the timing object

player.getQualities().then((qualities) => {
// qualities = an array of quality objects
}).catch((error) => {
// an error occurred
});

{
  "label":  "4K",
  "id":     "2160p",
  "active": true
}

player.getQuality().then((quality) => {
  // quality = the current selected quality
}).catch((error) => {
  // an error occurred
});

player.setQuality('720p').then((quality) => {
  // quality was successfully set
}).catch((error) => {
  switch (error.name) {
    case 'TypeError':
      // the quality selected is not valid
      break;
    default:
      // some other error occurred
      break;
  }
});

player.getCameraProps().then((cameraProps) => {
  // cameraProps = the current camera properties
}).catch((error) => {
  // an error occurred
});

{
  "yaw":    360,
  "pitch":  90,
  "roll":   180,
  "fov":    45
}

player.setCameraProps({
  "yaw":    360, // Number between 0 and 360, left and right.
  "pitch":  90,// Number between -90 and 90, up and down.
  "roll":   180,// Number between -180 and 180.
  "fov":    45   // The field of view in degrees.
}).then((cameraProps) => {
  // cameraProps was successfully set
}).catch((error) => {
  switch (error.name) {
    case 'RangeError':
      // one of the camera properties is out of range
      break;
    default:
      // some other error occurred
      break;
  }
});

{
  duration:   61.857
  percent:    0
  seconds:    0
}

{
  duration:   61.857
  percent:    0
  seconds:    0
}

{
  duration:   61.857
  percent:    0
  seconds:    0
}

{
  duration:   61.857
  percent:    1
  seconds:    61.857
}

{
  duration:   61.857
  percent:    0.049
  seconds:    3.034
}

{
  duration:   61.857
  percent:    0.502
  seconds:    31.052
}

{
  duration:   61.857
  percent:    0.485
  seconds:    30
}

{
  duration:   61.857
  percent:    0.485
  seconds:    30
}

{
  kind:     "captions",
  label:    "English CC",
  language: "en"
}

{
  startTime:    15,
  title:        "Chapter 1",
  index:        1
}

{
  cues: [
    {
      html: "<i>Here at Vimeo, there's always <br>one thing on our minds:</i>",
      text: "<i>Here at Vimeo, there's always ↵one thing on our minds:</i>"
    }
  ],
  kind:     "captions",
  label:    "English CC",
  language: "en"
}

{
  time: 15,
  data: {
    customKey: 'customValue'
  },
  id: "40f5722b-09aa-4060-a887-3c81aaa37cce"
}

{
  volume: 0.5
}

{
  playbackRate: 1.5
}

{
  message:  "#984220 does not meet minimum contrast ratio. We recommend using brighter colors. (You could try #d35e30 instead.) See WCAG 2.0 guidelines: https://www.w3.org/TR/WCAG/#visual-audio-contrast"
  method:   "setColor"
  name:     "ContrastError"
}

{
  id: 76979871
}

{
  duration: 60
}

{
  fullscreen: true
}

{
  quality: '720p'
}

{
  yaw:     270,
  pitch:   90,
  roll:    0,
  fov:     45
}

{
  videoWidth: 1280,
  videoHeight: 720
}

{
  action: 'seek', // event, none, overlay, seek, url
  actionPreference: {
    pauseOnAction:    false, // on `event`, `overlay`, `seek`, `url` action
    overlayId:        864334, // on `overlay` action
    seekTo:           30, // on `seek` action
    url:              'https://your-url.com', // on `url` action
  },
  currentTime:        15.585,
  customPayloadData:  null,
  hotspotId:          8148223
}

{
  action: 'seek', // clickthrough, close, event, none, seek
  actionPreference: {
    pauseOnAction:    true, // on `close`, `seek` action
    seekTo:           30, // on `seek` action
    url:              'https://your-url.com', // on `clickthrough` action
  },
  currentTime:        25.67,
  customPayloadData:  null,
  overlayId:          864334,
  panelId:            'c47193a0-8320-4572-9bcd-8425851b36e9'
}