Skip to main content

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:

LISTENERDESCRIPTIONEXAMPLE
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

EVENTDESCRIPTION
beforeCompleteFired 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.
bufferChangeFired when the currently playing item loads additional data into its buffer.
bufferFullFired when buffer is full.
castTriggered when a cast property changes.
completeFired when an item completes playback.
errorSignals a critical error in the playback process.
firstFrameTriggered by a video's first frame event (or the instant an audio file begins playback). This event pinpoints when content playback begins.
levelsChangedFired when the active quality level is changed.
muteTriggered when the player has gone in or out of a mute state.
pauseFired when the player enters the paused state.
playFired when the player enters the playing state.
playlistItemFired when the playlist index changes to a new playlist item. This event occurs before the player begins playing the new playlist item.
readySignifies when the player has been initialized and is ready for playback. This is the earliest point at which any API calls should be made.
seekFired immediately when a seek action starts.
seekedFired immediately when a seek action ends.
subtitleChangeSent when the user changes the subtitle for this video.
timeWhile the player is playing, this event is fired as the playback position gets updated. This may occur every 5 seconds.
visualQualityFired 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

EVENTDESCRIPTION
floatTriggered when the player has gone in or out of a float state.
fullscreenFired when the player toggles to/from fullscreen.
nextClickFired when user click on next video.
relatedOpenTriggers when the recommendations videos list is opened.
sharingOpenListens for the opening of the share interface.
viewableFired when the viewable property of the player changes.

Ad Events

EVENTDESCRIPTION
adClickVAST and IMA. Fired whenever a user clicks an ad to be redirected to its landing page.
adCompleteVAST and IMA. Fired whenever an ad has completed playback.
adErrorVAST and IMA. Fired whenever an error prevents the ad from playing.
adImpressionThe time indicated by the video element's currentTime attribute has changed.
adMuteTriggered when the player has gone in or out of a mute state during ad played.
adPauseFired whenever an ad is paused.
adPlayFired whenever an ad starts playing or when an ad is unpaused.
adSkippableFired the instant the ad can be skipped.
adSkippedVAST and IMA. Fired whenever an ad has been skipped.
adTimeFired while ad playback is in progress.
adFirstQuartileFired when the ad is quarter-way completed.
adSecondQuartileFired when the ad is halfway completed.
adThirdQuartileFired when the ad is a quarter away from being completed.

Analytics Events

EVENTDESCRIPTION
video-completedFired when the video is completed.
video-startedFired when the video starts.
video-stateFired 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.
firstQuartileFired when the video is quarter-way completed.
secondQuartileFired when the video is halfway completed.
thirdQuartileFired 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")
}
});