Methods return a Promise. As shown below, you can handle the response to see if the request succeeded.

​
play()

Play the video.

player

  .play()

  .then(function () {

    console.log("Success");

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
pause()

Pause the video.

player

  .pause()

  .then(function () {

    console.log("Success");

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
ready()

Check if the player is ready.

You don’t need to chain this yourself when calling other methods as we check the player is ready internally.

player

  .ready()

  .then(function () {

    console.log("Success");

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
requestFullscreen()

Enter fullscreen mode.

Be aware that if you toggle fullscreen mode using an external button, that button will of course be covered up by the player once it goes fullscreen.

player

  .requestFullscreen()

  .then(function () {

    console.log("Success");

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
exitFullscreen()

Exit fullscreen mode.

player

  .exitFullscreen()

  .then(function () {

    console.log("Success");

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
Getters

These are the methods that return a value.

​
getColour()

Get the colour of the player, as a six-character hex. A blank value means the default colour is used. The value is a string.

For example: 74b9ff

player

  .getColour()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getCurrentTime()

Get the current time. The value is a number in seconds.

For example: 11.4

player

  .getCurrentTime()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getDuration()

Get the duration of the video, once it’s known. It will only be known once the video’s metadata is loaded. The value is a number in seconds.

For example: 12

player

  .getDuration()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getEmbed()

Get an embed code for the video. It is a string which is a snippet of HTML.

player

  .getEmbed()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getEnded()

Check if the video has ended. This is a boolean.

For example: false

player

  .getEnded()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getFullscreen()

Check if the video is fullscreen. This is a boolean.

For example: false

player

  .getFullscreen()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getHeight()

Get the height of the video (not the height it is embeddeed at). This is a number.

It is only known once the video’s metadata has downloaded.

For example: 720

player

  .getHeight()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getId()

Get the ID of the embedded video. This is a string.

For example: abcdefgh1234567

player

  .getId()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getLoop()

Check if the video is set to loop (restart when it ends). This is a boolean.

For example: false

player

  .getLoop()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getMuted()

Check if the video is muted. This is a boolean.

For example: false

player

  .getMuted()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getPaused()

Check if the video is paused. This is a boolean.

For example: false

player

  .getPaused()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getPlaybackRate()

Get the playback rate. It’s returned as a number. The default is 1 (meaning 1x). The range is 0.5 to 2.

For example: 0.5

player

  .getPlaybackRate()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getPlayed()

Get the time period(s) during which the video has been played. This is a 2D array. All values are in seconds.

For example: [[0,4.367],[6,8.738]]

player

  .getPlayed()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getProgress()

Get the part(s) of the video that have been buffered. The data is returned as a 2D array with the values in seconds.

For example: [[0,8]]

player

  .getBuffered()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getQualities()

Get the available qualities/renditions. At a minimum there is an “auto” quality however once the video’s metadata is loaded and so the qualities are known, you may want to manually set a particular quality to be used. You would send one of these values. Each value is a string.

For example: ["360p","720p","1080p","auto"]

player

  .getQualities()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getQuality()

Get the currently selected quality/rendition. The default value is “auto” which means it is left up to the player to decide the quality (depending on the connection speed). However you may have manually selected a particular quality. The value is returned as a string.

For example: "720p"

player

  .getQuality()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getSeekable()

Get the time period(s) that are seekable within. This is a 2D array with each element being an array of [start,end]. All values are in seconds.

For example: [[0,11.4]]

player

  .getSeekable()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getSeeking()

Is the video currently seeking? The value is a boolean.

For example: false

player

  .getSeeking()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getTracks()

Get the available subtitle/closed caption tracks. This is an array of objects. If the video does not have any tracks, it will be empty.

For example: [{"id":"abcdefgh1234567","kind":"captions","language":"en","label":"English","mode":"disabled"}]

player

  .getTracks()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getTitle()

Get the title of the embedded video. It is a string.

For example: "Example video"

player

  .getTitle()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getUrl()

Get a URL to the video that can be shared or emailed. It is a string.

For example: "https://watch.vidbeo.com/abcdefghiklmnop"

player

  .getUrl()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getVolume()

Get the current volume. It is returned as a number between 0 and 1.

For example: 0.3

player

  .getVolume()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
getWidth()

Get the width of the video. This is only known once the video’s metadata has been downloaded. It is returned as a number.

For example: 1920

player

  .getWidth()

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
Setters

For these methods you need to pass a value as its parameter.

​
setColour(colour: String)

Set the colour of the player. We generally use a neutral look which works well on most sites but you can apply an accent colour. It should be a six-character string using the hex format.

For example: 00ffff

Any returned data parameter will simply echo back the same colour.

player

  .setColour("00ffff")

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
setCurrentTime(time: Float)

Seek to a particular time. The value should be a time in seconds. It must be greater than 0, and less than the duration of the video

For example: 7

Any returned data parameter will simply echo back the same time.

player

  .setCurrentTime(7)

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
setLoop(loop: Boolean)

Set whether the video should loop when it ends. The value should be a boolean.

For example: true

Any returned data parameter will simply echo back the same value.

player

  .setLoop(true)

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
setMuted(muted: Boolean)

Set whether the video should be muted. The value should be a boolean.

For example: true

Any returned data parameter will simply echo back the same value.

player

  .setMuted(true)

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
setPlaybackRate(rate: Float)

Set the playback speed. Since browsers do not reliably support some speeds, currently the value should be one of these numbers: 0.5, 1, 1.5, 2.

For example: 1.5

Any returned data parameter will simply echo back the same value.

player

  .setPlaybackRate(1.5)

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
setQuality(quality: String)

Set the quality. The default is “auto” which leaves the player to optimise the quality based on the available connection speed. However you can manually set a quality (from those available, as reported by getQualities()) such as “1080p” to override that.

For example: 1080p

Any returned data parameter will simply echo back the same value.

player

  .setQuality("1080p")

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
setVolume(volume: Float)

Set the volume. It should be a number between 0 and 1.

For example: 0.5

Any returned data parameter will simply echo back the same value.

player

  .setVolume(0.5)

  .then(function (data) {

    console.log("Success", data);

  })

  .catch(function (error) {

    console.error("Error", error);

  });

​
Event listener

To listen for one of the events use the on method to register a callback function and the off method to remove it.

Unlike the methods above, these do not return a Promise.

​
on(event: String, callback: Function)

Here we are listening for the playing event. The second parameter needs to be a function. That is the callback which is run when that event is fired:

player.on("playing", function (data) {

  console.log("playing", data);

});

​
off(event: String, callback: Function)

Here we are no longer listening for the playing event and want to remove all callbacks:

player.off("playing");

If you want to remove a specific callback function, pass that function as the optional second parameter:

const onPlaying = function (data) {

  console.log("playing", data);

};

player.off("playing", onPlaying);

Find out all of the possible events.

OptionsEvents