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")
}
});