Skip to content
Vega PlayerVega PlayerVega Player

Events

All events bubble and cross the Shadow DOM (composed: true), so you can listen on the player or on document. Data is in event.detail.

EventdetailFired when
vega-player:play—Playback starts.
vega-player:pause{ byBrowser }Playback pauses. byBrowser is true when the browser paused it (hidden tab).
vega-player:ended—The video reaches the end.
vega-player:timeupdate{ currentTime, duration }On each native timeupdate (about 4 times per second).
vega-player:ratechange{ rate }The speed changes.
vega-player:qualitychange{ src }The quality changes.
vega-player:responsive-src{ src, label, playerWidth, devicePixelRatio }A file is picked from responsive-src.
vega-player:source-switch-error{ src, reason, code? }A quality/source switch fails. reason: media-error or play-blocked.
vega-player:captionschange{ enabled }Captions are toggled.
vega-player:captions-error{ src }The captions file fails to load.
vega-player:thumbnails-error{ src }The thumbnails file fails to load (generated thumbnails are used instead).
vega-player:cta-click{ url }The modal button is clicked.
vega-player:hidden—The controls auto-hide (hide-on-play-delay).
vega-player:error{ code, message }The video fails to load.
vega-player:chromecast-available—The Cast SDK is ready.
vega-player:chromecast-connected—Connected to a Cast device.
vega-player:chromecast-disconnected—Disconnected from the Cast device.
vega-player:chromecast-error{ message }A Cast operation fails.

Examples

Section titled “Examples”
const player = document.querySelector('vega-player');


player.addEventListener('vega-player:pause', (e) => {
  console.log(e.detail.byBrowser ? 'Paused by the browser' : 'Paused by the user');
});


player.addEventListener('vega-player:timeupdate', (e) => {
  const { currentTime, duration } = e.detail;
  progressLabel.textContent = `${Math.round((currentTime / duration) * 100)}%`;
});


player.addEventListener('vega-player:error', (e) => {
  reportError(e.detail.code, e.detail.message);
});