Events Reference

Event Usage

The Vertical Player emits events when user actions or playback state changes occur. These events can be listened to using a single event listener and distinguished by the returned eventName.

Supported Listener

LISTENER	DESCRIPTION
on(eventName, callback)	Attaches callback to the event identified by eventName. The callback is invoked every time the player emits that event.

Basic Usage Example

<script>
    vpVerticalPlayer("divId")
        .setup(config)
        .then(() => {
            vpVerticalPlayer("divId").on("vp-video-started", (event) => {
                // ...
            });
        });
</script>

Native Video Events

EVENT NAME	DESCRIPTION
waiting	Playback is ready but waiting for more data (buffering).
ended	Playback has finished.
play	User initiated playback.
pause	Playback has been paused.
playing	Playback has started or resumed.
volumechange	Volume level or mute state changed.
stalled	No data is being loaded during a playback attempt.
canplay	Enough data is available to begin playback.
progress	Media buffering progress has been updated.
timeupdate	Current playback time has changed.
loadeddata	First frame of the media has been loaded.
loadedmetadata	Media metadata loaded (duration, dimensions, etc.).
idle	Player is idle, stopped, or in an errored state.
loadstart	Media loading has started.
seeking	A seek operation is in progress.
seeked	A seek operation has completed.
suspend	Browser has intentionally halted media loading.
ratechange	Playback rate has changed.

Player State Events

EVENT NAME	DESCRIPTION
vp-subtitle-change	Subtitle track was changed.
vp-seeked	Seeking operation has finished.
vp-finished	Video playback has finished.
vp-state-playing	Player entered the playing state.
vp-state-paused	Player entered the paused state.
vp-first-frame	First video frame was loaded.
vp-ready	Player is ready for API calls.
vp-video-switch	Active video was changed.
vp-time	Emitted every 5 seconds with time and duration.
vp-user-interaction	Any user interaction with the player.
vp-video-locked	Video is locked and cannot be played.

Ad Events

EVENT NAME	DESCRIPTION
vp-ad-click	User clicked the ad.
vp-ad-first-quartile	Ad reached 25% playback.
vp-ad-second-quartile	Ad reached 50% playback.
vp-ad-third-quartile	Ad reached 75% playback.
vp-ad-complete	Ad finished playback (not skipped).
vp-ad-skip	Ad was skipped by the user.
vp-ad-progress	Ad playback progress update.
vp-ad-impression	Ad impression was registered.
vp-ad-error	Error occurred during ad playback.
vp-ad-time-update	Ad playback time was updated.

Analytics Events

EVENT NAME	DESCRIPTION
vp-embed	Player was embedded.
vp-video-started	Video playback started.
vp-video-completed	Video playback completed.
vp-first-quartile	25% of the video was watched.
vp-second-quartile	50% of the video was watched.
vp-third-quartile	75% of the video was watched.
vp-video-state	Periodic playback state emitted every 10s.
vp-twenty-view	20 seconds of the video were watched.
vp-true-view	Valid view based on user interaction.
watchedtime	Total watch time tracked.

Generic Event (vp-event / vpEvent)

The Vertical Player emits a generic event called vp-event (vpEvent) that captures all player events, including playback, state, analytics, ad, and native video events.

EVENT NAME	ALIAS	DESCRIPTION
vp-event	vpEvent	Generic event for custom player events.

Listening to All Vertical Player Events

You can listen to all Vertical Player events using the vp-event listener and filter by the eventName property.

vpVerticalPlayer("player").on("vp-event", (e) => {
  console.log("Vertical Player Event:", e.eventName, e);
});