Events reference

Event Usage

Certain events are triggered when the player does something. Certain events also return information. You will find the plethora of events listed and divided based on their function down below.

Currently, VP Player events support the following event triggers:

LISTENER	DESCRIPTION	EXAMPLE
on(event)	Using an on listener will continually listen for an event for a specified player. If this player is removed and set up again, the listener will also need to be reinstated.	vpPlayer().on(event, [callback])

You can see an example of this code being used below. The below event triggers every time a volume change is initiated and will return a number called "volume" within an object.

vpPlayer().on("play", (e) => {
    vpPlayer().setVolume(0.7);
});

The tables of events below are divided into Playback Events, Player State Events, and Ad Events.

Playback Events

EVENT	DESCRIPTION
beforeComplete	Fired just before the player completes playing. Unlike the onComplete event, the player will not have moved on to either showing the replay screen or advancing to the next playlistItem.
bufferChange	Fired when the currently playing item loads additional data into its buffer.
bufferFull	Fired when buffer is full.
cast	Triggered when a cast property changes.
complete	Fired when an item completes playback.
error	Signals a critical error in the playback process.
firstFrame	Triggered by a video's first frame event (or the instant an audio file begins playback). This event pinpoints when content playback begins.
levelsChanged	Fired when the active quality level is changed.
mute	Triggered when the player has gone in or out of a mute state.
pause	Fired when the player enters the paused state.
play	Fired when the player enters the playing state.
playlistItem	Fired when the playlist index changes to a new playlist item. This event occurs before the player begins playing the new playlist item.
ready	Signifies when the player has been initialized and is ready for playback. This is the earliest point at which any API calls should be made.
seek	Fired immediately when a seek action starts.
seeked	Fired immediately when a seek action ends.
subtitleChange	Sent when the user changes the subtitle for this video.
time	While the player is playing, this event is fired as the playback position gets updated. This may occur every 5 seconds.
visualQuality	Fired when the active quality level is changed for HLS. This is different from levelsChanged since this will trigger when adaptive streaming automatically shifts quality.

Player State Events

EVENT	DESCRIPTION
float	Triggered when the player has gone in or out of a float state.
fullscreen	Fired when the player toggles to/from fullscreen.
nextClick	Fired when user click on next video.
relatedOpen	Triggers when the recommendations videos list is opened.
sharingOpen	Listens for the opening of the share interface.
viewable	Fired when the viewable property of the player changes.

Ad Events

EVENT	DESCRIPTION
adClick	VAST and IMA. Fired whenever a user clicks an ad to be redirected to its landing page.
adComplete	VAST and IMA. Fired whenever an ad has completed playback.
adError	VAST and IMA. Fired whenever an error prevents the ad from playing.
adImpression	The time indicated by the video element's currentTime attribute has changed.
adMute	Triggered when the player has gone in or out of a mute state during ad played.
adPause	Fired whenever an ad is paused.
adPlay	Fired whenever an ad starts playing or when an ad is unpaused.
adSkippable	Fired the instant the ad can be skipped.
adSkipped	VAST and IMA. Fired whenever an ad has been skipped.
adTime	Fired while ad playback is in progress.
adFirstQuartile	Fired when the ad is quarter-way completed.
adSecondQuartile	Fired when the ad is halfway completed.
adThirdQuartile	Fired when the ad is a quarter away from being completed.

Analytics Events

EVENT	DESCRIPTION
video-completed	Fired when the video is completed.
video-started	Fired when the video starts.
video-state	Fired every 10 seconds. Its duty is to check whether the video at the moment is paused, playing, whether it is muted or not, its volume etc.
firstQuartile	Fired when the video is quarter-way completed.
secondQuartile	Fired when the video is halfway completed.
thirdQuartile	Fired when the video is a quarter away from being completed.

All Events

You can setup a listener on all events for a specific player, by listening on vp-event events, and get all properties for a specified event based on its name eventName property:

vpPlayer().on("vp-event", (e) => {
    // Check for specific eventName
    if(e.eventName == "play"){
        console.log("Event play was just triggered on VP Player events")
    }
});